import { Col, Row } from "reactstrap";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { useFormikContext } from "formik";
import { useModalState } from "../../../zustand/Modal";
import { useEffect } from "react";
import { Admin_type } from "../../../types/App";

import SelectGroup from "../SelectGroups/SelectGroup";

const Form = () => {
  const formik = useFormikContext();
  const { isOpen } = useModalState((state) => state);

  useEffect(() => {
    if (isOpen === "") {
      formik.setErrors({});
    }
    if (isOpen === "isSuccess") {
      formik.setErrors({});
      formik.resetForm();
    }
  }, [isOpen]);
  const { values } = useFormikContext<any>();
  return (
    <Row className="w-100">
      <Col>
        <ValidationField
          placeholder="username"
          label="username"
          name="username"
        />
        <ValidationField
          placeholder="email"
          label="email"
          name="email"
          type="email"
        />
        <ValidationField
          placeholder="password"
          label="password"
          name="password"
        />
        <ValidationField label="status" name="status" type="Checkbox" />
      </Col>
      <Col>
        <ValidationField
          placeholder="type"
          label="type"
          name="type"
          type="Select"
          option={Admin_type}
        />
        {values?.type === "branchAdmin" && (
          <>
            {/* <ValidationField
              placeholder="branch"
              label="branch"
              name="branch_id"
              type="Select"
              option={Branch}
              isMulti
              isDisabled={values?.type !== "branchAdmin"}
            />
            <ValidationField
              placeholder="roles"
              label="roles"
              name="roles"
              type="Select"
              option={Role}
              isDisabled={!values?.branch_id}
            /> */}
            <SelectGroup />
          </>
        )}
      </Col>
    </Row>
  );
};

export default Form;
