import React, { useState } from 'react';
import {CashbookDto,CashbookDtoDefault, EmployeeDto} from '@gtpl/shared-models/gtpl';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { EmployeeService } from '@gtpl/shared-services/attendance';

import './employee-cashbook-form.css';
import { Form, Input, Button, Select, DatePicker } from 'antd';
import moment from 'moment';
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 14,
  },
};
/* eslint-disable-next-line */
export interface EmployeeCashbookFormProps {
  cashbookDto: CashbookDto;
  saveCashbook: (cashbookDto: CashbookDto) => void;
  updateCashbook: (cashbookDto: CashbookDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
}

export function EmployeeCashbookForm(
  props: EmployeeCashbookFormProps
) {
  const [form] = Form.useForm();
  const employeeService = new EmployeeService;
  const getCopiedData = (): CashbookDto => {
    return JSON.parse(JSON.stringify(props.cashbookDto));
  };
  const [employeesData, setEmployeesData] = useState<EmployeeDto[]>([])
  const [cashbookData, setCashbookData] = useState<CashbookDto>(getCopiedData);
  const [selectedMonth, setSelectedMonth]= useState('');
  const dateFormat = "YYYY-MM-DD";

  React.useEffect(() => {
    console.log(cashbookData);
    form.setFieldsValue({
       cashbookId:cashbookData.cashbookId,
       empId:cashbookData.empId,
       activityDate:moment(cashbookData.activityDate, dateFormat),
       amount:cashbookData.amount,
     });
     getEmployees();
   }, []);

   const getEmployees = () => {
    employeeService.getActiveEmployees().then(res => {
      console.log(res.data);
      if (res.status) {
        setEmployeesData(res.data);
      } else {
        if (res.intlCode) {
          setEmployeesData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setEmployeesData([]);
    })
  }
  const saveData = (values) => {
    console.log(values);
    if(values.cashbookId!=0){
      props.updateCashbook(values);
    }else{
      props.saveCashbook(values);
    }
    
  };
  
  const onReset = () => {
    form.resetFields();
  };
  const handleChange=(value) =>{
    console.log(value.format('YYYY-MM-DD'));
    setSelectedMonth(value.format('YYYY-MM-DD'))
  }

  const employees = () => {
    if(employeesData){
      return employeesData.map(item => {
        return (
          <Option value={item.Id} key={item.Id}>
            {item.empName}
          </Option>
        );
      })
    }
  }

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

  
  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="cashbookId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>
      <Form.Item
        name="empId"
        label="Employee Name"
        rules={[
          {
            required: true,
            message: 'Employee Name is required',
          },
        ]}
      >
        <Select 
         showSearch 
         onSearch={onSearch} 
         filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
         disabled={cashbookData.cashbookId===0 ? false : true} 
         placeholder='Please Select' 
         defaultValue={''}>
            {employees()}
          </Select>

      </Form.Item>

      <Form.Item
        name="activityDate"
        label="Payment Date"
        rules={[
          {
            required: true,
            message: "Payment Date is required"
          },
        ]}        
      >
      <DatePicker 
      disabled={cashbookData.cashbookId===0 ? false : true}
      disabledDate={(current) => {
        return (moment()  <= current);
        }}
      picker="date" />

      </Form.Item>
      <Form.Item
        name="amount"
        label="Amount"
        rules={[
          {
            required: true,
            // pattern: /^[1-9 ]*$/,
            // 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>
  );
}

export default EmployeeCashbookForm;