import React, {useEffect, useState} from 'react';
import {Form, Input, Button, Select, Card, Row, Col, InputNumber} from 'antd';
import {AlertMessages} from '@gtpl/shared-utils/alert-messages';
import {Link, useHistory} from 'react-router-dom';
import {OperationDto} from '@gtpl/shared-models/production-management';
import {OperationService} from '@gtpl/shared-services/production';
import './operations-form.css';

import { WorkstationCategoryService} from '@gtpl/shared-services/production';
import { WorkstationCategoryDTO } from '@gtpl/shared-models/production-management';

import TextArea from 'antd/lib/input/TextArea';

/* eslint-disable-next-line */
export interface OperationsFormProps {
  operationData: OperationDto;
  updateOperation: (operation: OperationDto) => void;
  isUpdate: boolean;
  closeForm: () => void;
}

export function OperationsForm(
  props: OperationsFormProps
) {
  const { Option } = Select;
  const [form] = Form.useForm();
  const [selectedWorkStationCategory, setSelectedWorkStationCategory] = useState<WorkstationCategoryDTO>();
  const [workstationCategoryData, setWorkstationCategoryData] = useState<WorkstationCategoryDTO[]>([]);
  const [display, setDisplay] = useState<string>('none');
  let history = useHistory();
  const operationService = new OperationService();
  const workStation = new WorkstationCategoryService();
  const [disable, setDisable] = useState<boolean>(false)
  useEffect(() => {
    getAllWorkStations();
  },[])

  const getAllWorkStations = () =>{
    workStation.getAllActiveWorkstationCategories().then(res => {
      if (res.status) {
        setWorkstationCategoryData(res.data);
      } else {
        if (res.intlCode) {
            setWorkstationCategoryData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setWorkstationCategoryData([]);
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const createOperation = (operationsData) => {
    setDisable(true)
    operationService.createOperation(operationsData).then(res => {
      setDisable(false)
      if(res.status){
        AlertMessages.getSuccessMessage('Operation Created Successfully');
        history.push("/operations-view");
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }

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

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

  const handleWorkStationCategory=(value)=>{
    setSelectedWorkStationCategory(value);
    if(value == ''){
      setDisplay('block');
    } else {
      setDisplay('none');
    } 
  }
  
  const saveData = (values: OperationDto) => {
    setDisable(false)
    if(props.isUpdate){
      console.log(values)
      props.updateOperation(values);
    }else{
      setDisable(false)
      console.log(values)
      createOperation(values);
    }
  
  };
  return (
    <Card title={<span style={{ color: 'white' }}>Operation</span>} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate ? '' : <Link to='/operations-view' ><Button className='panel_button' >View </Button></Link>}
    >
      <Form layout="vertical" form={form} initialValues={props.operationData} name="control-hooks" onFinish={saveData}>
      <Form.Item name="operationId" style={{ display: "none" }} >
        <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="operationCode"
                      label="Operation Code"
                    
                  
                      rules={[
                        {
                          required: true,
                          message:'Operation Code is required',
                        },
                        {
                          pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                          message: `Enter valid Operation Code`,
                          },
                        ]}
                      >
                      <Input/>
                    </Form.Item>
        </Col>

        <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} >
          <Form.Item
            name="operationName"
            label="Operation Name"
            rules={[
              {
                required: true,
                message: 'Operation Name is Required',

              },
              {
                pattern: /^[^-\s\\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z0-9_/`"-',.|\s-]*$/,
                message: `Invalid Operation Name`
              }

              
            ]}>
            <Input />
          </Form.Item>
        </Col>

        <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} >
          <Form.Item
            name="workstationCategoryId"
            label="Work Station Category"
            rules={[
              {
                required: true,
                message: 'Work Station Category required'
              },
              {
                pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                message: `Don't Allow Spaces`
              }

            ]}>
            <Select
              showSearch
              //style={{ width: 210 }}
              placeholder="Select Work Station"
              optionFilterProp="children"
              onSelect={handleWorkStationCategory}
              onFocus={onFocus}
              onBlur={onBlur}
              onSearch={onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option key={0} value={null}>Select WorkStation</Option>
              {workstationCategoryData.map((workstationCategoryData) => {
                return <Option key={workstationCategoryData.workstationCategoryId} value={workstationCategoryData.workstationCategoryId}>{workstationCategoryData.workstationCategory}</Option>
              })}
            </Select>
          </Form.Item>
        </Col>
        <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}} >

          <Form.Item name="isValueAddition" label="Is Value Addition" rules={[{ required: true,message: 'Missing brand design' }]}>
              <Select
                  placeholder="Is Value Addition"
                  allowClear
                  defaultValue = "0"
              >
                  <Option value='1'>Yes</Option>
                  <Option value='0'>No</Option>

              </Select>
          </Form.Item>

      </Col>
        

      </Row>
      <Row>
        <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 OperationsForm;