import { FormikProps } from 'formik';
import { useKhovtMasterKhoControllerFind } from 'main/apis/drc/endpoints/khovt-master-kho-controller/khovt-master-kho-controller';
import { Select2Box } from 'main/components/molecules/selectbox';
import moment from 'moment';
import { ChangeEvent, useMemo } from 'react';
import ReactDatetime from 'react-datetime';
import { Col, Form, FormGroup, FormText, Input, Label, Row } from 'reactstrap';

enum FieldName {
  EXPORT_DATE = 'ngayXuat',
  EXPORT_STORE = 'khoXuat',
  IMPORT_STORE = 'khoNhap',
  EXPORT_BILL_NO = 'soPhieu',
  EXPORT_STATUS = 'status',
  EXPORT_NOTE = 'ghiChu',
  EXPORT_REASON = 'lyDoXuat',
  CREATED_BY = 'nguoiTaoPhieu',
  WARNING_INFO = 'thongTinCanhBao',
}

type Props = {
  formikProps: FormikProps<{
    ghiChu: string;
    khoNhap: string;
    khoXuat: string;
    lyDoXuat: string;
    ngayXuat: string;
    nguoiTaoPhieu: string;
    soPhieu: string;
    status: string;
    thongTinCanhBao: string;
  }>;
};

function SuppliesStoreExportAddInfo({ formikProps: { values, errors, handleChange, setFieldValue } }: Props) {
  // React Query hooks
  const { data: storeExports } = useKhovtMasterKhoControllerFind();
  const { data: storeImports } = useKhovtMasterKhoControllerFind();

  // React Function
  const exportStoreOptions = useMemo(() => {
    return storeExports?.map((store) => ({ id: store.id, text: store.tenKho })) || [];
  }, [storeExports]);

  const khoNhapOptions = useMemo(() => {
    return storeImports?.map((store) => ({ id: store.id, text: store.tenKho })) || [];
  }, [storeImports]);

  return (
    <Form>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Số phiếu xuất&nbsp;
              <i className="fa fa-asterisk fa-sm text-danger" />
            </Label>
            <Col md="9">
              <Input
                type="text"
                name={FieldName.EXPORT_BILL_NO}
                placeholder="Nhập số phiếu xuất"
                value={values.soPhieu || ''}
                onChange={handleChange}
                invalid={!!errors.soPhieu}
              />
              {errors.soPhieu && <FormText color="danger">{errors.soPhieu}</FormText>}
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Trạng thái
            </Label>
            <Col md="9">
              <Select2Box
                className="form-control"
                name={FieldName.EXPORT_STATUS}
                value={values.status}
                onChange={(e: ChangeEvent<HTMLSelectElement>) => setFieldValue(FieldName.EXPORT_STATUS, e.target.value)}
                data={[
                  { id: 'Open', text: 'Tạo mới' },
                  { id: 'Exported', text: 'Đã xuất hàng' },
                  { id: 'Canceled', text: 'Đã hủy' },
                ]}
                disabled
              />
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Kho xuất&nbsp;
              <i className="fa fa-asterisk fa-sm text-danger" />
            </Label>
            <Col md="9">
              <Select2Box
                className="form-control"
                options={{ placeholder: 'Chọn kho xuất' }}
                value={values.khoXuat}
                onChange={(e: ChangeEvent<HTMLSelectElement>) => setFieldValue(FieldName.EXPORT_STORE, e.target.value)}
                data={exportStoreOptions}
                invalid={!!errors.khoXuat}
              />
              {errors.khoXuat && <FormText color="danger">{errors.khoXuat}</FormText>}
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Kho nhập&nbsp;
              <i className="fa fa-asterisk fa-sm text-danger" />
            </Label>
            <Col md="9">
              <Select2Box
                className="form-control"
                options={{
                  placeholder: 'Chọn kho nhập',
                  className: `form-control ${!!errors.khoNhap ? 'is-invalid' : ''}`,
                }}
                value={values.khoNhap}
                onChange={(e: ChangeEvent<HTMLSelectElement>) => setFieldValue(FieldName.IMPORT_STORE, e.target.value)}
                invalid={!!errors.khoNhap}
                data={khoNhapOptions}
              />
              {errors.khoNhap && <FormText color="danger">{errors.khoNhap}</FormText>}
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Người tạo phiếu&nbsp;
              <i className="fa fa-asterisk fa-sm text-danger" />
            </Label>
            <Col md="9">
              <Input
                type="text"
                name={FieldName.CREATED_BY}
                value={values.nguoiTaoPhieu || ''}
                onChange={handleChange}
                invalid={!!errors.nguoiTaoPhieu}
              />
              {errors.nguoiTaoPhieu && <FormText color="danger">{errors.nguoiTaoPhieu}</FormText>}
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Ngày xuất kho&nbsp;
              <i className="fa fa-asterisk fa-sm text-danger" />
            </Label>
            <Col md="9">
              <ReactDatetime
                inputProps={{
                  placeholder: 'Chọn ngày',
                  className: `form-control ${!!errors.ngayXuat ? 'is-invalid' : ''}`,
                }}
                timeFormat={false}
                value={values.ngayXuat || undefined}
                onChange={(e) => setFieldValue(FieldName.EXPORT_DATE, moment(e))}
              />
              {errors.ngayXuat && <FormText color="danger">{errors.ngayXuat}</FormText>}
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12}>
          <FormGroup className="row">
            <Label className="form-control-label col-md-3 col-lg-1_5">Lý do xuất</Label>
            <div className="col-md-9 col-lg-10_5">
              <Input
                type="textarea"
                name={FieldName.EXPORT_REASON}
                value={values.lyDoXuat || ''}
                onChange={handleChange}
              />
            </div>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12}>
          <FormGroup className="row">
            <Label className="form-control-label col-md-3 col-lg-1_5">Thông tin cảnh báo</Label>
            <div className="col-md-9 col-lg-10_5">
              <Input
                type="textarea"
                name={FieldName.WARNING_INFO}
                value={values.thongTinCanhBao || ''}
                onChange={handleChange}
              />
            </div>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12}>
          <FormGroup className="row">
            <Label className="form-control-label col-md-3 col-lg-1_5">Ghi chú</Label>
            <div className="col-md-9 col-lg-10_5">
              <Input type="textarea" name={FieldName.EXPORT_NOTE} value={values.ghiChu || ''} onChange={handleChange} />
            </div>
          </FormGroup>
        </Col>
      </Row>
    </Form>
  );
}

export default SuppliesStoreExportAddInfo;
