import { EmployeeFreebiesAssignRequest, FreebieRequest } from "@gtpl/shared-models/canteen-management";
import { HrmsEmployeeDetailsDto } from "@gtpl/shared-models/masters";
import { FreebiesMappingConsumptionService, FreebiesServices } from "@gtpl/shared-services/canteen-management";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { Button, Card, Col, DatePicker, Form, Input, Row, Select } from "antd";
import { DepartmentService, HrmsEmpDetService } from '@gtpl/shared-services/masters';
import moment from "moment";
import React,{useEffect, useState} from "react";
import { Link, useHistory } from "react-router-dom";
// import {ComplaintsDto} from '@gtpl/shared-models/hrms';

export interface EmployeeTokensProps{
    Data: EmployeeFreebiesAssignRequest;
    updateData: (Data: EmployeeFreebiesAssignRequest) => void;
   isUpdate: boolean;
   closeForm: () => void;
}

const {Option} = Select;
export function EmployeeTokens(
  props: EmployeeTokensProps
) {
  const [form] = Form.useForm();
   const service = new FreebiesServices();
   const empSer = new FreebiesMappingConsumptionService();
  const [disable, setDisable] = useState<boolean>(false)
  const [empData, setEmpData] = useState<HrmsEmployeeDetailsDto[]>([]);
  const [current, setCurrent] = useState<any>();
  const [freebieData, setFreebieData] = useState<any[]>([]);

  const [selectedMonth, setSelectedMonth] = useState<any>(moment().month() + 1);
  const [selectedYear, setSelectedYear] = useState<any>(moment().year());

  const empService = new HrmsEmpDetService();

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

  useEffect(() => {
    getAllActiveEmployees();
    getAllActiveFreebies();
    // getAllDepartments();
    // getAllFreebies();
  }, []);
  useEffect(() =>{
    years(0)

  },[selectedYear,selectedMonth])


  const getAllActiveFreebies = () => {
    service.getAllActiveFreebies().then(res => {
      if (res.status) {
        setFreebieData(res.data);
      } else {
        if (res.intlCode) {
            setFreebieData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
        setFreebieData([]);
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const getAllActiveEmployees = () => {
    empService.getAllActiveEmployees().then((res) => {
      if (res.status) {
        console.log(res.data)
        setEmpData(res.data);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
        setEmpData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setEmpData([]);
    })
  }

  const createToken = (data: EmployeeFreebiesAssignRequest) =>{
    setDisable(true)
    console.log(data)
    empSer.createToken(data).then(res => {
      setDisable(false)
      if(res.status){
        AlertMessages.getSuccessMessage('Token Created Successfully');
        history.push('/employeetokens-grid')
        onReset();
      }else{
        if(res.intlCode){
          AlertMessages.getErrorMessage(res.internalMessage);
        }else{
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }
  
//   const createToken = (data: FreebieRequest) =>{
//     setDisable(true)
//     service.createToken(data).then(res => {
//       setDisable(false)
//       if(res.status){
//         AlertMessages.getSuccessMessage('Token Created Successfully');
//         history.push('/employeetokens-grid')
//         onReset();
//       }else{
//         if(res.intlCode){
//           AlertMessages.getErrorMessage(res.internalMessage);
//         }else{
//           AlertMessages.getErrorMessage(res.internalMessage);
//         }
//       }
//     }).catch(err => {
//       setDisable(false)
//       AlertMessages.getErrorMessage(err.message);
//     })
//   }

const months = [
    {
      month: 'January',
      monthId: 1
    }, {
      month: 'Feburary',
      monthId: 2
    }, {
      month: 'March',
      monthId: 3
    }, {
      month: 'April',
      monthId: 4
    }
    , {
      month: 'May',
      monthId: 5
    }
    , {
      month: 'June',
      monthId: 6
    }
    , {
      month: 'July',
      monthId: 7
    }
    , {
      month: 'August',
      monthId: 8
    }
    , {
      month: 'September',
      monthId: 9
    }
    , {
      month: 'October',
      monthId: 10
    }
    , {
      month: 'November',
      monthId: 11
    }
    , {
      month: 'December',
      monthId: 12
    }
  ]

  const setDatePicker = () => {
    form.setFieldsValue({
    })
  }

  const personalDetailsAffix = () => {
    setCurrent(0)
  }
  function feebieOonChange(e) {
  const lotNo=freebieData.filter((el) =>{return el.freebieCode == e})
  console.log(lotNo)
    const id =lotNo[0].freebieId 
    console.log(id)
form.setFieldsValue({freebieId:id})
  }
  function employeeOnChange(e){
    const employee = empData.filter((e1)=>{return e1.employeeCode == e}) 
    console.log(employee)
    const id = employee[0].employeeId
    console.log(id)
    form.setFieldsValue({employeeId:id})
  }

  function onSearch(val) {
    // console.log('search:', val);
  }

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

  const years = (back) => {
    const year = new Date().getFullYear();
    return Array.from({ length: back }, (v, i) => year - back + i + 1);
  }
  const lastTenYears = years(10)
  const saveData = (values: EmployeeFreebiesAssignRequest) => {
    console.log(values)
    setDisable(false)
    if(props.isUpdate){
      props.updateData(values);
    }else{
      setDisable(false)
      createToken(values);
    }
  };

  
  return (
    <Card title={<span style={{color:'white'}}>Employee Tokens</span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate==true?"":<Link to='/employeetokens-grid' ><Button className='panel_button' >View </Button></Link>}
    >
    <Form layout = "vertical" form={form} onFinish={saveData} initialValues={props.Data} >
        <Form.Item 
        name ="freebieId" style={{display:"none"}} >
          <Input hidden/>
        </Form.Item>
        <Form.Item 
        name ="employeeFreebiesId" style={{display:"none"}} >
          <Input hidden/>
        </Form.Item>
        <Form.Item name ="employeeId" style={{display:"none"}} >
          <Input hidden/>
        </Form.Item>
        <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
          <Input hidden/>
        </Form.Item>
      <Row gutter={24}>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                <Form.Item
                  name="employeeCode"
                  label="Employee Name"
                  rules={[
                    {
                      required: true,
                      message: "Select valid Employee Name"
                    }
                  ]}>
                  <Select
                    showSearch
                    onChange={e=>employeeOnChange(e)}
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Employee Name"
                    // onChange={}
                    allowClear
                    style={{ width: '100%' }}
                  >
                    {empData?.map(dropData => {
                      return <Option key={dropData.employeeId} value={dropData.employeeCode}>{dropData.employeeName + '-' + dropData.employeeCode}</Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}}>
          <Form.Item
                name="freebieCode"
                label="Freebie Code"
                rules={[
                  {
                    required: true,
                    message:"Enter valid Freebie Code"
                  },
                  
                ]}>
                  <Select
                    showSearch
                    placeholder="Select Freebie Code"
                    optionFilterProp="children"
                    onFocus={personalDetailsAffix}
                    onChange={e =>feebieOonChange(e)}
                    onSearch={onSearch}
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {freebieData?.map(dropData => {
                      return <Option key={dropData.freebieId} value={dropData.freebieId}>{dropData.freebieCode}</Option>;
                    })}
                  </Select>
          </Form.Item>
        </Col> 
               <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}}>
          <Form.Item
                name="freebieCount"
                label="Freebie Count"
                rules={[
                  {
                    required: true,
                    message:"Enter valid Freebie Count",max:10
                  },
                  {
                    pattern: /^[0-9]*$/,
                     message: `Should contain only numbers.`
                  }
                ]}>
                <Input/>
          </Form.Item>
        </Col>

        {/* <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}}>
          <Form.Item
                name="year"
                label="Year"
                rules={[
                  {
                    required: true,
                  }
                  
                ]}>
                <Select style={{paddingTop:'14px' ,marginTop:'-14px'}}
              placeholder="Select Year"
              allowClear
              onSelect={(value) => { setSelectedYear(value) }}
              defaultValue={moment().format('YYYY')}
            >
              {lastTenYears.map((value) => {
                return <Option  key={value} value={value}>{value}</Option>
              })}
            </Select>
          </Form.Item>
        </Col> */}

<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} 
>
            <Form.Item name="year" label="Year"
              rules={[
                {
                  required: true,
                },
              ]}
              initialValue={moment().format('YYYY')}>
              <Select
                placeholder="Select Year"
                allowClear
                onSelect={(value) => { setSelectedYear(value) }}
                defaultValue={moment().format('YYYY')}
              >
                {lastTenYears.map((value) => {
                  return <Option key={value} value={value}>{value}</Option>
                })}
              </Select>
            </Form.Item>
          </Col>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }} >
            <Form.Item name="month" label="Month"
              rules={[
                {
                  required: false,
                },
              ]}
              initialValue={(moment().month() + 1)} 
              >
              <Select
                placeholder="Select Month"
                allowClear
                onSelect={(value) => { setSelectedMonth(value) }}
                defaultValue={(moment().month() + 1)}
              >
                {months.map((i) => {
                  return <Option key={i.monthId} value={i.monthId}>{i.month}</Option>
                })}
              </Select>
            </Form.Item>
          </Col>
        <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}}>
          <Form.Item
                name="maxConsumptionPerDay"
                label="Max Consumption Per Day"
                rules={[
                  {
                    required: true,
                    message:"Enter valid number"
                  },
                  {
                    pattern: /^[0-9]*$/,
                     message: `Should contain only numbers.`
                  }
                ]}>
                <Input/>
          </Form.Item>
        </Col>
      </Row>
    
      <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary"disabled={disable} htmlType="submit" >
            Submit
          </Button>
          {(props.isUpdate!==true) &&
          <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
            Reset
          </Button>
          }
        </Col>

    </Form>
  </Card>
  );
}

export default EmployeeTokens;