import React from 'react';
import  { useEffect, useRef, useState } from "react";
import { Button, Card, Col, Divider, Drawer, Form, Input, Popconfirm, Row, Select, Space, Switch, Table, Tag, Upload } from 'antd'
import {  BankDetailsRequest, CertificatesDto, CompanyTypeEnum, FgPriceListRequest, FgPriceListResponseModel, FixedComponentsRateChartRequest } from "@gtpl/shared-models/masters";
import {CheckCircleOutlined,CloseCircleOutlined,RightSquareOutlined,EyeOutlined,EditOutlined,SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { Link, useHistory } from "react-router-dom";
import TextArea from 'antd/lib/input/TextArea';
import {BankDetailsService} from '@gtpl/shared-services/masters'
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';

/* eslint-disable-next-line */
export interface BankDetailsFormProps {
  bankData:BankDetailsRequest;
  updateform:(bankDetails:BankDetailsRequest)=>void;
  isUpdate:boolean;
  closeForm: () => void;
}

export function BankDetailsForm(
  props: BankDetailsFormProps
) {
  const [form] = Form.useForm();
  const history = useHistory();
  const [disable, setDisable] = useState<boolean>(false)
  let createdUser="";
  if(!props.isUpdate){
    createdUser= localStorage.getItem("createdUser");
  }
  const service=new BankDetailsService()
  const { Option } = Select;

  const createBankDetails=(val:BankDetailsRequest)=>{
    console.log(val,'oooooooooooooo');
    setDisable(true)
    service.createBankDetails(val).then(res => {
      setDisable(false)
      if (res.status) {
        AlertMessages.getSuccessMessage(res.internalMessage);
        history.push("/bank-details-view");
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const onReset=()=>{
    form.resetFields();
  }

  const saveData = (values: BankDetailsRequest) => {
    console.log(values,'pppppppppppppppp');
    
    setDisable(false)
    if(props.isUpdate){
      props.updateform(values);
    }else{
      setDisable(false)
      createBankDetails(values);
    }
  
  };

  console.log('screen',screen.width)
  return (
  

    <Card title={<span style={{color:'white'}}>Bank Details</span>}
        style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate==true?"":<Link to='/bank-details-view' ><span style={{color:'white'}} ><Button className='panel_button' >View </Button> </span></Link>} >
    
    
          <Form form={form} initialValues={props.bankData} name="control-hooks" onFinish={saveData}
          layout="vertical"
          >
    
          <Form.Item name="id" style={{display:"none"}} >
            <Input hidden/>
          </Form.Item>
          <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
          <Input hidden/>
        </Form.Item>
        <Row>
            <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="bankName"
                      label="Bank Name"
                      rules={[
                        {
                          required: true,
                          message:"Enter Bank Name"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Input/>
                    </Form.Item>
            </Col >
            <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="branchName"
                      label="branch Name"
                      rules={[
                        {
                          required: true,
                          message:"Enter branch Name"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Input/>
                    </Form.Item>
            </Col ><Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="bankAcc"
                      label="Account Number"
                      rules={[
                        {
                          required: true,
                          message:"Enter Account Number"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Input/>
                    </Form.Item>
            </Col ><Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="ifscCode"
                      label="IFSC Code"
                      rules={[
                        {
                          required: true,
                          message:"Enter IFSC Code"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Input/>
                    </Form.Item>
            </Col ><Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="swiftCode"
                      label="Swift Code"
                      rules={[
                        {
                          required: true,
                          message:"Enter Swift Code"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Input/>
                    </Form.Item>
         
                    </Col ><Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="company"
                      label="Company"
                      rules={[
                        {
                          required: true,
                          message:"Enter Company"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Select 
              placeholder='Company'
              showSearch
              allowClear
             
            >
              {Object.values(CompanyTypeEnum).map((i) => {
                return (
                  <Option key={i} value={i}>
                    {i}
                  </Option>
                );
              })}
            </Select>
                    </Form.Item>
            </Col >
            <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} style={{margin:'1%'}}>
                  <Form.Item
                      name="bankAddress"
                      label="Bank Address"
                      rules={[
                        {
                          required: true,
                          message:"Enter Bank Address"
                        },
                        // {
                        //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                        //   message: `Should contain only alphabets.`
                        // },
                      ]}
                      >
                      <Input/>
                    </Form.Item>
         
                    </Col >
            </Row>
            <Row>
            <Col span={24} style={{ textAlign: 'right' }}>
              
                <Button type="primary" disabled={disable} htmlType="submit" >
                  Submit
                </Button>
                {(props.isUpdate===false) &&
         <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
            Reset
          </Button>
          }
                </Col>
              </Row>
          </Form>
        </Card>
      );

}

export default BankDetailsForm;