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

type Props = {
  suppliesExportBill: KhovtTransPhieuXuatWithRelations;
};

function SuppliesStoreExportDetailInfo({
  suppliesExportBill: { ghiChu, khoNhap, khoXuat, lyDoXuat, ngayXuat, nguoiTaoPhieu, soPhieu, status, thongTinCanhBao },
}: 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 importStoreOptions = 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
            </Label>
            <Col md="9">
              <Input type="text" value={soPhieu || ''} disabled />
            </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"
                value={status}
                data={[
                  { id: 'Open', text: 'Tạo mới' },
                  { id: 'Exported', text: 'Đã xuất hàng' },
                  { id: 'Canceled', text: 'Đã hủy' },
                ]}
                disabled={true}
              />
            </Col>
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Kho xuất
            </Label>
            <Col md="9">
              <Select2Box className="form-control" value={khoNhap} data={importStoreOptions} disabled={true} />
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Kho nhập
            </Label>
            <Col md="9">
              <Select2Box className="form-control" value={khoXuat} data={exportStoreOptions} disabled={true} />
            </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
            </Label>
            <Col md="9">
              <Input type="text" value={nguoiTaoPhieu || ''} disabled />
            </Col>
          </FormGroup>
        </Col>
        <Col md={12} lg={6}>
          <FormGroup className="row">
            <Label className="form-control-label" md="3">
              Ngày xuất kho
            </Label>
            <Col md="9">
              <ReactDatetime inputProps={{ disabled: true }} value={moment(ngayXuat)} timeFormat={false} />
            </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" value={lyDoXuat || ''} disabled />
            </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" value={thongTinCanhBao || ''} disabled />
            </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" value={ghiChu || ''} disabled />
            </div>
          </FormGroup>
        </Col>
      </Row>
    </Form>
  );
}

export default SuppliesStoreExportDetailInfo;
