import React, { useState,useEffect } from 'react';
import 'antd/dist/antd.css';
import './subcontractors-form.css';
import { LibSubContractorsDto,LibSubContractorsDtoDefault} from '@gtpl/shared-models/gtpl';
import { Form, Input, Button, Select } from 'antd';
import ClearableLabeledInput from 'antd/lib/input/ClearableLabeledInput';
import { clear } from 'console';
/* eslint-disable-next-line */
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 14,
  },
};
export interface SubcontractorsFormProps {
  libSubContractorsDto: LibSubContractorsDto;
  saveSubContractor: (libSubContractorsDto: LibSubContractorsDto) => void;
  updateSubContractor: (libSubContractorsDto: LibSubContractorsDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
}

export function SubcontractorsForm(props: SubcontractorsFormProps) {

  const [form] = Form.useForm();
  const getCopiedData = (): LibSubContractorsDto => {
    return JSON.parse(JSON.stringify(props.libSubContractorsDto));
  };
  const [libSubContractorsDto, setlibSubContractorsDto] = useState<LibSubContractorsDto>(getCopiedData);
  const saveData = (values) => {
    console.log(values);
    if(values.subContractorId===0 || values.subContractorId==undefined){
      props.saveSubContractor(values);
    }else{
      props.updateSubContractor(values);
    }
    
  };
 
  const onReset = () => {
    form.resetFields();
  };
  React.useEffect(() => {
    form.setFieldsValue({
       createdUser:libSubContractorsDto.createdUser, 
       panCardNo:libSubContractorsDto.panCardNo,
       subContractorName:libSubContractorsDto.subContractorName,
       emailId:libSubContractorsDto.emailId,
       mobileNo:libSubContractorsDto.mobileNo,
       bankAccNumber:libSubContractorsDto.bankAccNumber,
       ifscCode:libSubContractorsDto.ifscCode,
       branchName:libSubContractorsDto.branchName,
       subContractorId:libSubContractorsDto.subContractorId,
     });
   }, []);
   return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="subContractorId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>
      <Form.Item name="panCardNo" style={{display:"none"}} >
        <Input defaultValue={Math.floor(Math.random()*100000+1)} hidden/>
      </Form.Item>
      
      <Form.Item
        name="subContractorName"
        label="Sub Contractor Name"
        rules={[
          {
            required: true,
            pattern: /^[a-zA-Z ]*$/,
            message: 'Name should be in Alphabet only',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="emailId"
        label="Email"
        rules={[
          {
            required: false,
            type: "email",
            message: 'Invalid Email'
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="mobileNo"
        label="Mobile No"
      
        rules={[
          {
            required: false,
            // type: "number",
            len: 10,
            pattern: /^\d{10}$/,
            message: "Mobile no. should be in 10 digits",
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="panCardNo"
        label="Pan Card No"
        rules={[
          {
            required: true,
            
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="bankAccNumber"
        label="Bank A/c No"
        rules={[
          {
            required: false,
            pattern: /^[0-9]+$/,
            message: 'Bank Account no. is required'
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="ifscCode"
        label="Ifsc Code"
        rules={[
          {
            required: false,
            message:'Invalid IFSC code',
            pattern: /^[0-9a-zA-Z]+$/,

          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="branchName"
        label="Branch Name"
        rules={[
          {
            required: false,
            pattern: /^[a-zA-Z ]*$/,
            message: 'Should be in Alphabet only',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit"
       
        >
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
       
      </Form.Item>
    </Form>
  );
};