import React, { useEffect, useState } from 'react';

import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {DocumentsApprovalForm} from '@gtpl/pages/logistics/logistics-components/documents-approval-form';
import { Button, Card,Drawer,Form,Row,Col,Alert,Select, Anchor,Spin, Dropdown} from 'antd';
import Link from 'antd/lib/typography/Link';
import { SaleOrderDropDownDto } from '@gtpl/shared-models/sale-management';
const { Option } = Select;

import './documents-approval-pages.css';
import { DocumentationData } from '../data';

/* eslint-disable-next-line */
export interface DocumentsApprovalPagesProps {}

export function DocumentsApprovalPages(
  props: DocumentsApprovalPagesProps
) {
  const [saleOrderData, setSaleOrderData] = useState<SaleOrderDropDownDto[]>([])
  const [documentationData, setDocumentationData] = useState(null)
  const [showForm, setShowForm] = useState<boolean>(false)
  const saleOrderService = new SaleOrderService();
  const [form] = Form.useForm();

  useEffect(() => {
    getSaleOrderData();
    
  }, []);
  const getDocumentsData = () => {
    setDocumentationData(DocumentationData)
    setShowForm(true);
  }
  const getSaleOrderData = () => {
    saleOrderService.getSaleOrdersDropDownList().then((res) => {
      if (res.status) {
        console.log(res.data);
        setSaleOrderData(res.data);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
        setSaleOrderData([]);
      }
    }).catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setSaleOrderData([]);
    });
  }
  const handleApproval=(record,value)=>{
  }
  const submitStatus=async()=>{
  }
  const getDocumentDetails = (value) => {
    console.log(value);
    getDocumentsData();
  }
  const [loading, setLoading] = useState(true)

useEffect(() => {
  setTimeout(() => setLoading(false), 1000)
  console.log(showForm)

}, [])
return (
  <>
 {loading === false ? (
<>
 <Card title={<span style={{color:'white'}}>Documentation Approval</span>}
  style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
   <br></br>
        <Form form={form} layout={'vertical'} style={{ padding: '0px' }}  >
          <Row gutter={[32, 32]}>
            
            <Col span={5}>
              <Form.Item name="saleOrderId" label="SO Number" rules={[{ required: false }]}>
                  <Select
                      placeholder=" Select SO Number"
                      onChange={getDocumentDetails}
                      allowClear
                  >
                    {saleOrderData?saleOrderData.map(dropdown => {
                    return <Option key={dropdown.saleOrderId}  value={dropdown.saleOrderNumber}>{dropdown.saleOrderNumber}</Option>
                  }):""} 

                  </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
      {
        showForm === true ? (
        <DocumentsApprovalForm formData={documentationData} updateStatus={handleApproval} submitStatus={submitStatus} />
        ) : ""
      }
      
    </>
  ): (
    <div className="spins">
    <Spin size="large"/>
    </div>
  )}
  </>
);
}

export default DocumentsApprovalPages;