import React, { useState } from 'react';
import { Form, Input, Button, Select, Card, Row, Col, TimePicker, Table, Space } from 'antd';
import './container-log-book-form.css';
import { CategoriesInput, ForkliftJobcodesDropDownDto, ItemsDetails, PackTypeCategory, SaleOrderDetailViewInfoDTO, SaleOrderDropDownDto, SaleOrderItemsDTO, SaleOrderItemsInfo, UnitsOfWeightInput } from '@gtpl/shared-models/sale-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { ColumnProps } from 'antd/lib/table';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

/* eslint-disable-next-line */
const { Option } = Select;

export interface LogBookItemsProps {
  saleOrderItemDetails:ItemsDetails[]
  getBrandsData: (saleOrderItemId: number) => void;
  brandsData:any;
}

export function LogBookItems(
  props: LogBookItemsProps
) {
  const [form] = Form.useForm();
  let createdUser = localStorage.getItem('createdUser');
  const [saleOrderData, setSaleOrderData] = useState<SaleOrderDropDownDto[]>([])
  const [tableData, setTableData] = useState<any[]>([]);
  const [btnChange, setBtnChange] = useState<boolean>(false);
  const [fieldsData, setFieldsData] = useState<any>(undefined);
  const [indexVal, setIndexVal] = useState(0);
  const [showTable, setShowTable] = useState<boolean>(true);

  function onBlur() {
    // console.log('blur');
  }

  const onReset = () => {
    form.resetFields();
  };
  function onFocus() {
    // console.log('focus');
  }

  function onSearch(val) {
    // console.log('search:', val);
  }
  const getItemDetails = (value) => {
    props.getBrandsData(value);
  }
  const saveRow = (values: any) => 
  {
    console.log(values);
    form.validateFields().then(storeConsumptionres => {
        let tableName = tableData;
        let duplicateData;
        if (!btnChange) {
          duplicateData = tableName.find(item => (item.itemId.key == fieldsData.itemId.key));
        }
        else {
          console.log(indexVal);
          duplicateData = tableName.find(item => (item.itemId.key == fieldsData.itemId.key && item.row == fieldsData.row));
        }
  
        if (duplicateData) {
          AlertMessages.getErrorMessage('Row already exist. ');
          onReset();
        } else {
          if (!btnChange) {
            console.log('btnChange');
            form.validateFields().then(res => {
              setShowTable(true);
              let dynTableData = [...tableData, fieldsData]
              setTableData(dynTableData);
            })
          } else {
            let dynTableData = [...tableData]
            dynTableData[indexVal].row=fieldsData.row
            dynTableData[indexVal].saleOrderItemId = fieldsData.saleOrderItemId
            dynTableData[indexVal].barnsId = fieldsData.barnsId
            dynTableData[indexVal].cartons = fieldsData.cartons
            setShowTable(true);
            setTableData(dynTableData);
          }
          onReset();
        }
      }).catch((err) => { console.log(err); });   
  }
  const columns: ColumnProps<any>[] = [
    {
      title: 'Row',
      dataIndex: 'row',
      key: 'row',
      align: 'left',
      render: (text, data, index) => {
        // console.log(text, data, index)
        return <span>{data.itemId.children}</span>
      }
    },
    {
      title: 'Product SKU',
      dataIndex: 'variantCode',
      key: 'variantCode',
      render: (text, record,index) => ( 
          <Form.Item
              name="saleOrderItemId"
              label="Product SKU"
              rules={[
                {
                  required: true,
                  message: 'Product SKU is required',
                },
              ]}
            >
            <Select
                placeholder="Select Product SKU"
                allowClear
                showSearch
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                onChange={getItemDetails}
                filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
                {props.saleOrderItemDetails?.map(saleOrderDropDown => {
                return <Option value={saleOrderDropDown.saleOrderItemId}>{saleOrderDropDown.varient}</Option>
                })}
            </Select>
          </Form.Item>
      ),
    },
    {
      title: 'Brand',
      dataIndex: 'brand',
      key: 'brand',
      render: (text, record,index) => ( 

      <Form.Item
              name="brandId"
              label="Brand"
              rules={[
                {
                  required: true,
                  message: 'Brand is required',
                },
              ]}
            >
            <Select
                placeholder="Select Brand"
                allowClear
                showSearch
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
                {saleOrderData.map(saleOrderDropDown => {
                return <Option value={saleOrderDropDown.saleOrderId}>{saleOrderDropDown.saleOrderNumber}</Option>
                })}
            </Select>
            </Form.Item>
      )
    },
    {
      title: 'Cartons',
      dataIndex: 'cartons',
      key: 'cartons',
      align: 'left',
      render: (text, record,index) => ( 
        <Form.Item
          name="cartons"
          label="No of Cartons"
          rules={[
              {
              required: true,
              message: 'Cartons is required',
              },
          ]}
          >
        <Input/>
      </Form.Item>
    )
    },
  ]
  return (
    <><Card title={<span style={{ color: 'white' }}>Row Wise Log</span>} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>
      <Form layout="vertical" form={form} name="control-hooks" onFinish={saveRow}>
        <Form.Item name="logbookItemId" style={{ display: 'none' }}>
          <Input hidden />
        </Form.Item>
        <Form.Item
          style={{ display: 'none' }}
          name="createdUser"
          initialValue={createdUser}
        >
          <Input hidden />
        </Form.Item>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="saleOrderItemId"
              label="Product SKU"
              rules={[
                {
                  required: true,
                  message: 'Product SKU is required',
                },
              ]}
            >
              <Select
                placeholder="Select Product SKU"
                allowClear
                showSearch
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                onChange={getItemDetails}
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {props.saleOrderItemDetails?.map(saleOrderDropDown => {
                  return <Option value={saleOrderDropDown.saleOrderItemId}>{saleOrderDropDown.varient}</Option>;
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="brandId"
              label="Brand"
              rules={[
                {
                  required: true,
                  message: 'Brand is required',
                },
              ]}
            >
              <Select
                placeholder="Select Brand"
                allowClear
                showSearch
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {saleOrderData.map(saleOrderDropDown => {
                  return <Option value={saleOrderDropDown.saleOrderId}>{saleOrderDropDown.saleOrderNumber}</Option>;
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="cartons"
              label="No of Cartons"
              rules={[
                {
                  required: true,
                  message: 'Cartons is required',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={1} style={{ padding: '2.2em' }}>
            <Form.Item>
              <Button style={{ backgroundColor: "#67b32d", color: "white" }} type="primary" htmlType="submit">
                {btnChange ? 'UPDATE' : 'ADD'}
              </Button>
            </Form.Item>
          </Col>
          <Col span={1} style={{ padding: '2.2em' }}>
            <Form.Item>
              <Button style={{ backgroundColor: "#f19c9b", color: "white" }} onClick={onReset}>
                Reset
              </Button>
            </Form.Item>
          </Col>
        </Row>
        <br />
        {showTable ?
          <Table key={Date.now()} scroll={{ x: 500 }} dataSource={tableData}
            columns={columns} pagination={false} /> :
          <></>}
      </Form>
    </Card>
    <Form.List name="cusAddressInfo">
        {(fields, { add, remove }) => (
          <>
            <Card>
              <Form.Item>
                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                  Add Row
                </Button>
              </Form.Item>
              {fields.map(field => (
                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }}>
                  <Row gutter={24}>
                  <Form.Item name="logbookItemId" style={{ display: 'none' }}>
                    <Input hidden />
                  </Form.Item>
                  <Form.Item
                    style={{ display: 'none' }}
                    name="createdUser"
                    initialValue={createdUser}
                  >
                    <Input hidden />
                  </Form.Item>
                  <Col span={6}>
                    <Form.Item
                      name="saleOrderItemId"
                      label="Product SKU"
                      rules={[
                        {
                          required: true,
                          message: 'Product SKU is required',
                        },
                      ]}
                    >
                      <Select
                        placeholder="Select Product SKU"
                        allowClear
                        showSearch
                        onFocus={onFocus}
                        onBlur={onBlur}
                        onSearch={onSearch}
                        onChange={getItemDetails}
                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                      >
                        {props.saleOrderItemDetails?.map(saleOrderDropDown => {
                          return <Option value={saleOrderDropDown.saleOrderItemId}>{saleOrderDropDown.varient}</Option>;
                        })}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={4}>
                    <Form.Item
                      name="brandId"
                      label="Brand"
                      rules={[
                        {
                          required: true,
                          message: 'Brand is required',
                        },
                      ]}
                    >
                      <Select
                        placeholder="Select Brand"
                        allowClear
                        showSearch
                        onFocus={onFocus}
                        onBlur={onBlur}
                        onSearch={onSearch}
                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                      >
                        {saleOrderData.map(saleOrderDropDown => {
                          return <Option value={saleOrderDropDown.saleOrderId}>{saleOrderDropDown.saleOrderNumber}</Option>;
                        })}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={4}>
                    <Form.Item
                      name="cartons"
                      label="No of Cartons"
                      rules={[
                        {
                          required: true,
                          message: 'Cartons is required',
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                  </Row>
                  <MinusCircleOutlined onClick={() => remove(field.name)} />
                </Space>
              ))}
            </Card>

          </>
        )}
      </Form.List></>
  );
}

export default LogBookItems;