import React, { useState } from 'react';
import {TaxesDto} from '@gtpl/shared-models/masters';
import {TaxesService} from '@gtpl/shared-services/masters';
import { ClassValidator } from '@gtpl/shared-utils/class-validators';
import { useIntl } from 'react-intl';
import { Select, Input, Card, Form, Col, Row, Divider, Button, Popconfirm, message, InputNumber } from 'antd';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Link, useHistory } from "react-router-dom";
import { TaxCategoriesEnum } from '@gtpl/shared-models/common-models';


/* eslint-disable-next-line */
export interface TaxesFormProps {
  
  taxesData:TaxesDto;
  updateTax: (taxesData:TaxesDto) => void;
  isUpdate: boolean;
  // saveItem:(varirantData:VariantDto) => void;
  closeForm: () => void;

}

const tailLayout = {
  wrapperCol: { offset: 18, span: 16 },
};
const layout = {
  wrapperCol: { span: 8},
labelCol:{span:8}
}


  export function TaxesForm(props: TaxesFormProps) {
    const [form] = Form.useForm();
    const [disable, setDisable] = useState<boolean>(false)
    const service = new TaxesService();
    let history = useHistory();
    const { formatMessage: fm } = useIntl();
    const classValidator = new ClassValidator();
    const { Option } = Select;

    let createdUser="";
    if(!props.isUpdate){
      createdUser= localStorage.getItem("createdUser");
    }

    const onReset = () => {
      console.log('hhhhhh');
      form.resetFields();
    };

const saveData = (values: TaxesDto) => {
  setDisable(false)
  // console.log(values);
  if(props.isUpdate){
    props.updateTax(values);
  }else{
    setDisable(false)
    save(values);
  }

};

const save = (taxesData: TaxesDto) => {
  setDisable(true)
  taxesData.isActive=true;
  service.createTax(taxesData).then(res => {
    setDisable(false)
    if (res.status) {
      AlertMessages.getSuccessMessage('Tax Created Successfully');
      history.push("/taxes-view");
      onReset();
    } else {
      if (res.intlCode) {
        AlertMessages.getErrorMessage(res.internalMessage);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }
   })
   .catch(err => {
    setDisable(false)
    //  AlertMessages.getErrorMessage(err.message);
  })
  
}

const onFocus=() =>{
  console.log('focus');
}

const onSearch=(val)=> {
  console.log('search:', val);
}
const onBlur=() =>{
  console.log('blur');
}


  return (
    
   <Card title={<span style={{color:'white'}}>Taxes</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} 
    // extra={<Link to='/taxes-view' > 
    // {(props.isUpdate===false) && <span style={{color:'white'}} ><Button className='panel_button' > View </Button> </span> }</Link>} 
    extra={props.isUpdate==true?"":<Link to='/taxes-view' ><Button className='panel_button' >View </Button></Link>}
    >

      <Form form={form} onFinish={saveData} initialValues={props.taxesData} layout="vertical" name="control-hooks"> 
      <Form.Item name="taxId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
    <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
      <Input hidden/>
    </Form.Item>
    <Row>
    
        <Col span={8} style={{margin:'2%'}}>
            <Form.Item
                name="taxName"
                label="Tax Name"
                rules={[
                  {
                     required: true,message: 'Tax name is mandatory'
                  },
                  // {
                  //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z\\0-9\[\]()@#$_\-+/`~{}:";'<>,.?|\s-]*$/,
                  //     message: `Invalid Tax Name`
                  // }
                ]}>
    
          <Input/>
          </Form.Item>
    </Col>
    <Col style={{margin:'2%'}}>
    <Form.Item
      name="taxPercentage"
      label="Tax Percentage(%)"
      rules={[
        {
          required: true, message: 'Tax Percentage(%) is mandatory, enter a correct value',
          
        },
        {
          pattern: /^[^-\s\\a-zA-Z\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][Z0-9.\s]*$/,
          message: `Invalid Tax Percentage`
        }

      ]}
    >
      <Input />
        </Form.Item>
      </Col>
      <Col style={{margin:'2%'}}>
    <Form.Item
      name="taxCategory"
      label="Tax Category"
      rules={[
        {
          required: true, message: 'Tax Category is mandatory',
          
        },
       

      ]}
    >
      <Select
                showSearch
                style={{ width: 200 }}
                placeholder="Select Tax Category"
                optionFilterProp="children"
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                <Option key={0} value={null}>Select State Category</Option>
                <Option key={TaxCategoriesEnum.Central} value={TaxCategoriesEnum.Central}>Central</Option>
                <Option key={TaxCategoriesEnum.State} value={TaxCategoriesEnum.State}>State</Option>
               
              </Select>
        </Form.Item>
      </Col>
      
    
      <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 TaxesForm