import { Button, Col, InputGroup, InputGroupText, Label, Row } from "reactstrap";
import { City, CityFeedback, FirstName, LastName, LooksGood, MarkFirstNamePlaceholder, State, StateChoose, StateFeedback, SubmitButton, Username, UsernameFeedback, Zip, ZipFeedback, OttoLastNamePlaceholder } from "@/Constant";
import { Form, Field } from "formik";
import { TooltipFormValidationProp } from "@/Types/FormType";
import { TooltipValidationStateList } from "@/Data/Form&Table/Form";

export const TooltipValidationForm:React.FC<TooltipFormValidationProp>=({errors,submitErrors,setSubmitError})=> {
  return (
    <Form>
      <Row className="g-3 custom-input">
        <Col md="4" className="position-relative">
          <Label>{FirstName}</Label>
          <Field name="firstname" type="text" className={`form-control ${submitErrors && `${errors.firstname ? "is-invalid" : "is-valid"}`}`} placeholder={MarkFirstNamePlaceholder} />
          <div className="valid-tooltip">{LooksGood}</div>
        </Col>
        <Col md="4" className="position-relative">
          <Label>{LastName}</Label>
          <Field name="lastname" type="text" className={`form-control ${submitErrors && `${errors.lastname ? "is-invalid" : "is-valid"}`}`} placeholder={OttoLastNamePlaceholder} />
          <div className="valid-tooltip">{LooksGood}</div>
        </Col>
        <Col md="4" className="position-relative">
          <Label>{Username}</Label>
          <InputGroup className="has-validation">
            <InputGroupText>@</InputGroupText>
            <Field type="text" name="username" className={`form-control ${submitErrors && `${errors.username ? "is-invalid" : "is-valid"}`}`} />
            <div  className="invalid-tooltip">{UsernameFeedback}</div>
          </InputGroup>
        </Col>
        <Col md="6" className="position-relative">
          <Label>{City}</Label>
          <Field name="city" type="text" className={`form-control ${submitErrors && `${errors.city ? "is-invalid" : "is-valid"}`}`} />
          <div  className="invalid-tooltip">{CityFeedback}</div>
        </Col>
        <Col md="3" className="position-relative">
          <Label htmlFor="validationTooltip04">{State}</Label>
          <Field name="state" as="select" className={`form-control form-select ${submitErrors && `${errors.state ? "is-invalid" : "is-valid"}`}`}>
            <option>{StateChoose}</option>
            {TooltipValidationStateList.map((item,index)=>(<option value={item} key={index}>{item}</option>))}
          </Field>
          <div className="invalid-tooltip">{StateFeedback}</div>
        </Col>
        <Col md="3" className="position-relative">
          <Label>{Zip}</Label>
          <Field name="zip" type="text" className={`form-control ${submitErrors && `${errors.zip ? "is-invalid" : "is-valid"}`}`} />
          <div className="invalid-tooltip">{ZipFeedback}</div>
        </Col>
        <Col sm="12">
          <Button color="primary" type="submit" onClick={() => setSubmitError(true)}>{SubmitButton}</Button>
        </Col>
      </Row>
    </Form>
  );
} 

Remove package from project

import { Card, CardBody, Row, FormGroup, Col, Form, Input, Label } from "reactstrap";

<Form className="theme-form">
  <Card>
    <CardBody class="p-0">
     <Row>
      <Col>
       <FormGroup>
         <Label>Email address</label>
         <Input type="email" placeholder="name@example.com">
       </FormGroup>
      </Col>
     </Row>
    </CardBody>
  </Card>
</Form>

import { Card, CardBody, Row, Col, Input, Label } from "reactstrap";
                  
<Card>               
  <CardBody>
   <Row>
    <Col lg="3" md="6" className="custom-radio-ml">
     <div className="form-check radio radio-primary">
      <Input id="radio1" type="radio" name="radio1" value="option1">
      <Label for="radio1" ckeck>Option<span class="digits"> 1</span></Label>
     </div>
     <div className="form-check radio radio-primary">
      <Input id="radio3" type="radio" name="radio1" value="option1" disabled>
      <Label for="radio3" check disabled>Disabled</Label>
     </div>
     <div className="form-check radio radio-primary">
      <Input id="radio4" type="radio" name="radio1" value="option1" checked>
      <Label for="radio4" check>Checked</Label>
     </div>
   </Col>
   <Col md="6" lg="3">
    <div className="form-check checkbox mb-0">
     <Input id="checkbox1" type="checkbox" >
     <Label className="my-0" for="checkbox1" check>Default</Label>
    </div>
    <div className="form-check checkbox mb-0">
     <Input id="checkbox2" type="checkbox" disabled >
     <Label className="my-0" for="checkbox2" check disabled>Disabled</Label>
    </div>
    <div className="form-check checkbox mb-0">
     <Input id="checkbox3" type="checkbox" checked >
     <Label className="my-0" for="checkbox3" check>Checked</label>
    </div>
   </Col>
   </Row>
  </CardBody>
</Card>

<Form>
  <FormGroup className="m-form__group">
   <div class="form-label">Left Addon</div>
   <InputGroup>
    <span class="input-group-text">@</span>
    <Input type="text" placeholder="Email">
   </InputGroup>
  </FormGroup>
</Form>

import ReactDatePicker from "react-datepicker";

const DatePickerComponentFirst = () => {
const [startDate, setStartDate] = useState(new Date());
const handleChange = (date: Date) => setStartDate(date);

  return (
    <Row>
      <Col xxl="9" className="box-col-12">
        <InputGroup className="flatpicker-calender">
          <ReactDatePicker className="form-control flatpickr-input" selected={startDate} onChange={handleChange} />
        </InputGroup>
      </Col>
    </Row>
  );
};
              

<Label className="switch">
 <Input type="checkbox" checked>
 <span className="switch-state"></span>
</Label>
<Label className="switch">
 <Input type="checkbox">
 <span className="switch-state"></span>
</Label>

const DefaultTouchspin = () => {
  const initialValues = DEFAULT_TOUCHSPIN_DATA.map((data) => data.value);
  const [values, setValues] = useState(initialValues);
  const handleIncrement = (index:number) => {
    setValues((prevValues) => {
      return prevValues.map((value, i) => (i === index ? value + 1 : value));
    });
  };

  const handleDecrement = (index:number) => {
    setValues((prevValues) => {
      return prevValues.map((value, i) => (i === index && value > 0 ? value - 1 : value));
    });
  };

  return (
      <Card>
        <CardBody className="common-flex">
          <div className="touchspin-wrapper d-flex">
            <Btn color="primary" outline className={`p-0 decrement-touchspin btn-touchspin me-1 ${btnClass}`} onClick={onDecrement}>
              <i className="fa fa-angle-left" />
            </Btn>
            <Input className={`input-touchspin spin-outline-${color} me-1`} type="number" value={value} readOnly />
            <Btn color={color} outline={outline} className={`p-0 increment-touchspin btn-touchspin ${btnClass}`} onClick={onIncrement}>
              <i className="fa fa-angle-left" />
            </Btn>
          </div>
        </CardBody>
      </Card>
  );
};

import { Typeahead } from "react-bootstrap-typeahead";

const BasicTypeAhead = () => {
  return (
   <Card>
     <CardBody>
       <div id="the-basics">
         <Form className="theme-form">
           <div>
             <Typeahead options={STATE_OF_USA} placeholder="States of USA" id="Basic TypeAhead" />
           </div>
         </Form>
       </div>
     </CardBody>
   </Card>
  );
};

const NumberingWizard = () => {
  const { numberLevel,basicInputFormValue, showFinish } = useAppSelector((state)=>state.numberingWizard)
  const dispatch= useAppDispatch()
  const stepperHorizontalData = ["Basic Info", "Cart Info", "Feedback", "Finish"];


  const getUserData = (event: ChangeEvent<HTMLInputElement>) => {
    const name = event.target.name;
    const value = name === "agreeTerms" || name === "informationCheckBox" || (name === "agreeConditions") ? event.target.checked : (name === "uploadDocumentation") ? event.target.files && event.target.files[0].name : event.target.value;
    dispatch(setBasicInputFormValue({ ...basicInputFormValue, [name]: value }));
  };

return (
  <Card className="height-equal">
    <CardBody className="basic-wizard important-validation">
      <div className="stepper-horizontal">
        {stepperHorizontalData.map((data, index) => (
          <div key={index} className={`stepper-one stepper step ${level > index + 1 ? "done active " : ""}`}>
            <div className="step-circle"><span>{index + 1}</span><div>
            <div className="step-title">{data}</div>
            <div className="step-bar-left"/>
            <div className="step-bar-right"/>
          </div>
        ))}
      </div>
      <div id="msform">
        {numberLevel === 1 && 
          <Form className="stepper-one g-3 needs-validation custom-input" noValidate>
            <Row>
            <Col sm="6" className="mb-3">
              <Label check>{Email}<span className="txt-danger">*</span></Label>
              <Input onChange={getUserData} value={email} name="email" type="email" placeholder={RihoMail} />
            </Col>
            <Col sm="6" className="mb-3">
              <Label check>{FirstName}<span className="txt-danger">*</span></Label>
              <Input onChange={getUserData} value={firstName} name="firstName" type="text" placeholder={EnterYourName} />
            </Col>
            <Col xs="12" className="mb-3">
              <Label check>{Password}<span className="txt-danger">*<span></Label>
              < onChange={getUserData} value={password} name="password" type="password" placeholder={EnterPassword} />
            </Col>
            <Col xs="12" className="mb-3">
              <Label check>{ConfirmPassword}<span className="txt-danger">*</span></Label>
              <Input onChange={getUserData} value={confirmPassword} name="confirmPassword" type="password" placeholder={EnterConfirmPassword} />
            </Col>
            <Col xs="12" className="mb-3">
              <FormGroup check>
                <Input id="inputCheckWizard" name="agreeTerms" onChange={getUserData} type="checkbox" checked={agreeTerms} required/>
                <Label className="mb-0" htmlFor="inputCheckWizard" check>{AgreeToTermsAndConditions}</Label>
              </FormGroup>
            </Col>
            </Row>
          </Form>
        }
        {numberLevel === 2 && <CartInfoForm getUserData={getUserData} basicInputFormValue={basicInputFormValue} />}
        {numberLevel === 3 && <FeedbackForm getUserData={getUserData} basicInputFormValue={basicInputFormValue} />}
        {numberLevel === 4 && <FinishForm />}
      </div>
      <div className="wizard-footer d-flex gap-2 justify-content-end">
        {numberLevel > 1 && (
          <Btn> className="alert-light-primary" color="transparent" onClick={()=> dispatch(handleBackButton())}>{Back}</Btn>
        )}
        <Btn disabled={showFinish ? true : false} color="primary" onClick={()=> dispatch(handleNextButton())}>{showFinish ? "Finish" : "Next"}</Btn>
      </div>
    </CardBody>
  </Card>
);
};                

<!-- Redux file -->
import { createSlice } from "@reduxjs/toolkit";
import ShowError from "../../../Componant/FormLayout/common/ShowError";

const initialState = {
  numberLevel:1,
  basicInputFormValue: { email: "", firstName: "", password: "", confirmPassword: "", agreeTerms: false, placeHolderName: "", cardNumber: "", expiration: "", cvvNumber: "", uploadDocumentation: "", informationCheckBox: false, linkedInLink: "", gitHubLink: "", giveFeedBack: "", state: "", agreeConditions: false },
  showFinish:false
};

const NumberingWizardSlice = createSlice({
  name: "NumberingWizardSlice",
  initialState,
  reducers: {
    setBasicInputFormValue: (state,action) => {
      state.basicInputFormValue = action.payload
    },
    setShowFinish: (state,action) => {
      state.showFinish = action.payload
    },
    handleBackButton: (state) => {
      state.showFinish = false
      if (state.numberLevel === 2) {
        state.numberLevel = state.numberLevel - 1
      };
      if (state.numberLevel === 3) {
        state.numberLevel = state.numberLevel - 1
      };
      if (state.numberLevel === 4) {
        state.numberLevel = state.numberLevel - 1
      };
    },
    handleNextButton: (state) => {
      if (state.basicInputFormValue.email !== "" && state.basicInputFormValue.firstName !== "" && state.basicInputFormValue.password !== "" && state.basicInputFormValue.confirmPassword !== "" && state.basicInputFormValue.agreeTerms !== false && state.numberLevel === 1) {
        state.numberLevel = 2
      } else if (state.basicInputFormValue.placeHolderName !== "" && state.basicInputFormValue.cardNumber !== "" && state.basicInputFormValue.expiration !== "" && state.basicInputFormValue.cvvNumber !== "" && state.basicInputFormValue.informationCheckBox !== false && state.basicInputFormValue.uploadDocumentation !== "" && state.numberLevel === 2) {
        state.numberLevel = 3
      }
      else if (state.basicInputFormValue.linkedInLink !== "" && state.basicInputFormValue.gitHubLink !== "" && state.basicInputFormValue.giveFeedBack !== "" && state.basicInputFormValue.state !== "" && state.basicInputFormValue.agreeConditions !== false && state.numberLevel === 3) {
        state.numberLevel = 4
        state.showFinish = true
      } else {
        ShowError();
      }
    },
  },
});

export const { setBasicInputFormValue,setShowFinish,handleBackButton,handleNextButton } = NumberingWizardSlice.actions;

export default NumberingWizardSlice.reducer;