import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Select, Card, Row, Col, DatePicker, TimePicker } from 'antd';
import { Link, useHistory } from 'react-router-dom';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { FreebieRequest } from '@gtpl/shared-models/canteen-management';
// import { FreebiesDTO } from '@gtpl/shared-models/hrms';
import { FreebiesServices } from '@gtpl/shared-services/canteen-management';
import './freebies.css';
import moment from 'moment';

import { DepartmentService } from '@gtpl/shared-services/masters';
import { DepartmentDto } from '@gtpl/shared-models/masters';
/* eslint-disable-next-line */
export interface FreebiesProps {
  Data: FreebieRequest;
  updateData: (Data: FreebieRequest) => void;
  isUpdate: boolean;
  closeForm: () => void;
}

export function Freebies(
  props: FreebiesProps
) {
  const Option = Select;
  const [form] = Form.useForm();
  const service = new FreebiesServices();
  const [disable, setDisable] = useState<boolean>(false)
  const [startTime, setStartTime] = useState<string>('00:00');
  const [endTime, setEndTime] = useState<string>('00:00');
  const departmentService = new DepartmentService();
  const [departmentsData, setDepartmentsData] = useState<DepartmentDto[]>([]);
  let history = useHistory()
  let createdUser = "";
  const format = 'HH:mm';

  if (!props.isUpdate) {
    createdUser = localStorage.getItem("createdUser");
  }
  useEffect(() => {
    getAllActiveDepartment();
  }, [])
  const createFreebie = (data: FreebieRequest) => {
    setDisable(true)
    const startHour = Number(startTime.split(':')[0]);
    const startMinutes = Number(startTime.split(':')[1]);
    const endHour = Number(endTime.split(':')[0]);
    const endMinutes = Number(endTime.split(':')[1]);
    data.startHour = startHour;
    data.startMinutes = startMinutes;
    data.endHour = endHour;
    data.endMinutes = endMinutes;
    service.createFreebie(data).then(res => {
      setDisable(false)
      if (res.status) {
        if (startTime == '00:00' || endTime == '00:00') {
          return AlertMessages.getWarningMessage('Start and end time are mandatory');
        }
        AlertMessages.getSuccessMessage('Freebies Created Successfully');
        history.push('/freebies-view')
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }

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

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

  const saveData = (values: FreebieRequest) => {
    setDisable(false)
    if (props.isUpdate) {
      console.log(values,'valuee')
      props.updateData(values);
      onStartTimeChange
      onEndTimeChange
    } else {
      setDisable(false)
      createFreebie(values);
    }
  };

  const onStartTimeChange = (time, timeString: string) => {
    // console.log(time.hour() + ':' + time.minutes(), timeString);
    console.log(timeString,'timeStringeString')
    setStartTime(timeString);
  };

  const onEndTimeChange = (time, timeString: string) => {
    setEndTime(timeString);
  };
  function onChange(value) {
    console.log(`selected ${value}`);
  }

  function onSearch(val) {
    console.log('search:', val);
  }
  const getAllActiveDepartment = () => {
    departmentService.getAllActiveDepartment().then(res => {
      if (res.status) {
        setDepartmentsData(res.data);
      } else {
        if (res.intlCode) {
          setDepartmentsData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDepartmentsData([]);
      AlertMessages.getErrorMessage(err.message);
    })
  }
  return (
    <Card title={<span style={{ color: 'white' }}>Freebie Details</span>} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate == true ? "" : <Link to='/freebies-view' ><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 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="freebieCode"
              label="Freebie Code"
              
              rules={[
                {
                  required: true,
                  message: "Enter valid Freebie Code"
                },
                {
                  pattern: /^[^-\s\\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z0-9 ]*$/,
                  message: `Should contain only alphabets and numbers.`
                }
              ]}>
              <Input  />
            </Form.Item>
          </Col>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item
              name="freebieCategory"
              label="Freebie Category"
              rules={[
                {
                  required: true,
                  message: "Enter valid Freebie Category"
                },
              ]}>
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }} >
            <Form.Item
              name="unitPrice"
              label="Unit Price"
              initialValue={'15'}
              rules={[
                {
                  required: false,
                  message: "Enter valid Unit Price"
                },
                {
                  pattern: /^[0-9]*$/,
                  message: `Should contain only numbers.`
                }
              ]}>
              <Input defaultValue={'15'}/>
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item
              name="description"
              label="Description"
              rules={[
                {
                  required: true,
                  message: "Please Enter Description"
                },
              ]}>
              <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
            <Form.Item name="startTime" label="Start Time" >
              <TimePicker key={startTime} defaultValue={moment(startTime, format)} format={format} onChange={onStartTimeChange} />
            </Form.Item>
          </Col>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
            <Form.Item name="endTime" label="End Time" >
              <TimePicker key={endTime} defaultValue={moment(endTime, format)} format={format} onChange={onEndTimeChange} />
            </Form.Item>
          </Col>
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }} >
            <Form.Item
              name="departmentId"
              label="Department"

              rules={[
                {
                  required: false,
                  message: 'Department is required'
                },
              ]}>
              <Select
                showSearch
                placeholder="Select Department"
                optionFilterProp="children"
                onChange={onChange}
                onSearch={onSearch}
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {departmentsData?.map(dropData => {
                  return <Option key={dropData.deptId} value={dropData.deptId}>{dropData.deptName}</Option>;
                })}
              </Select>
            </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 Freebies;