import React, { useEffect, useState } from 'react';
import { AutoComplete, Button, Card, Cascader, Col, DatePicker, Descriptions, Form, FormInstance, Input, InputNumber, Radio, Row, Select, Switch, Table, Tag, TimePicker, TreeSelect } from 'antd';
import { Link, useHistory, useLocation } from 'react-router-dom';
import moment from 'moment';
import { ApprovalInput, ConditionInput } from '@gtpl/shared-models/common-models';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { LabellingService } from '@gtpl/shared-services/production'

import './labelling-details.css';
import { LabellingDto } from '@gtpl/shared-models/production-management';

/* eslint-disable-next-line */
export interface LabellingDetailsProps {
  labellingData: LabellingDto
}

export function LabellingDetails(
  props: LabellingDetailsProps
) {

  const [dataSource, setDataSource] = useState([]);
  const [btnDisable, setBtnDisable] = useState<boolean>(false);
  const [labellingData, setLabellingData] = useState<LabellingDto>(null);
  const [selectedLabelling, setSelectedLabelling] = useState<any>(undefined);
  const service = new LabellingService()

  let location = useLocation();

  useEffect(() => {
    if (location.state)
      getLabellingById(location.state);
  }, []);


  const getLabellingById = (id) => {
    service.getLabellingById(id).then(res => {
      if (res.status) {
        setLabellingData(res.data);
      } else {
        if (res.intlCode) {
          setLabellingData(null);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setLabellingData(null);
      AlertMessages.getErrorMessage(err.message);
    })
  }


  const columns = [

    {
      title: 'Time',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: 'grade',
      dataIndex: 'grade',
      key: 'grade',
    },
    {
      title: 'Details of Shrimps(units/bags)',
      dataIndex: 'shrimpsUnitBags',
      key: 'shrimpsUnitBags',
    },
    {
      title: 'Details of Allergen(units/bags)',
      dataIndex: 'allergenUnitBags',
      key: 'allergenUnitBags',
    },
    {
      title: 'Certification Logo',
      dataIndex: 'certificationLogo',
      key: 'certificationLogo',
    },
    {
      title: 'Remarks',
      dataIndex: 'remarks',
      key: 'remarks',
    },
    {
      title: 'Corrective Action',
      dataIndex: 'correctiveAction',
      key: 'correctiveAction',
    },
    {
      title: 'Checked By',
      dataIndex: 'checkedBy',
      key: 'checkedBy',
    },

  ];

  return (
    <Form
      layout="vertical"
    // form={rmEvalSamplesInfo}
    >
      <Card size="small" title={<span style={{ color: 'white' }}>Labelling Samples</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>
        <Row gutter={24}>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Form.Item
              name={"time"}
              label="Time"
              rules={[
                {
                  required: true,
                  message: `Missing Start Time`,
                },
              ]}
              initialValue={moment()}
            >
              <TimePicker use12Hours format="h:mm a" style={{ width: '100%' }} />
            </Form.Item>
          </Col>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name="grade"
              label="Grade"
              rules={[
                {
                  required: true,
                  message: `Missing Sample No`,
                },
              ]}

            >
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name={"shrimpsUnitBags"}
              label="Details Of Shrimps(unit bags/label)"
              rules={[
                {
                  required: true,
                  message: `Details Of Shrimps`,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name={"allergenUnitBags"}
              label="Details Of Allergen(unit bags/label)"
              rules={[
                {
                  required: true,
                  message: `Details Of Shrimps`,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name={"certificationLogo"}
              label="Certification Logo"
              rules={[
                {
                  required: true,
                  message: `Details Of Shrimps`,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name={"remarks"}
              label="Remarks"
              rules={[
                {
                  required: false,

                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name={"correctiveAction"}
              label="Corrective Action"
              rules={[
                {
                  required: true,
                  message: `Corrective Action required`,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name={"checkedBy"}
              label="checked By"
              rules={[
                {
                  required: true,
                  message: `checked By required`,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }} style={{ textAlign: 'right', paddingTop: '30px' }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
            <Button
              htmlType="button"
              style={{ margin: '0 14px' }}
            // onClick={onReset}
            >
              Reset
            </Button>
          </Col>
        </Row>
      </Card>


      <Card size="small" title={<span style={{ color: 'white' }}>Labelling Report</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>
        <Descriptions column={3}>
          <Descriptions.Item label="Labelling Date">
            {props.labellingData.labellingDate ? props.labellingData.labellingDate : ''}
          </Descriptions.Item>
          <Descriptions.Item label="Traceability code">
            {props.labellingData.traceabilityCode ? props.labellingData.traceabilityCode : ''}
          </Descriptions.Item>
          {/* <Descriptions.Item label="Product">
              {props.labellingData.product?props.labellingData.product:''}
            </Descriptions.Item>
            <Descriptions.Item label="Packing">
              {props.labellingData.packing?props.labellingData.packing:''}
            </Descriptions.Item> */}
          <Descriptions.Item label="Country">
            {props.labellingData.country ? props.labellingData.country : ''}
          </Descriptions.Item>
          <Descriptions.Item label="Total MC's">
            {props.labellingData.totalMCs ? props.labellingData.totalMCs : ''}
          </Descriptions.Item>
          {/* <Descriptions.Item label="Brand">
              {props.labellingData.brand?props.labellingData.brand:''}
            </Descriptions.Item> */}

        </Descriptions>
        <Row gutter={24}>
          <Table dataSource={dataSource} columns={columns} scroll={{ x: true }} />
        </Row>
      </Card>

    </Form>


  );
}

export default LabellingDetails;