import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './projects-form.css';
import { CostCenterDtoDefault, CostCentersDto, CostCenterRequest,  ProjectsDto, AllCostCentersResponseModel} from '@gtpl/shared-models/gtpl';
import {CostcenterService, StateService} from '@gtpl/shared-services/attendance'
import { Form, Input, Button, Select, Row } from 'antd';
import ClearableLabeledInput from 'antd/lib/input/ClearableLabeledInput';
import { clear } from 'console';
import { NONAME } from 'dns';
const { Option } = Select;

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 14,
  },
};
/* eslint-disable-next-line */
export interface IProjectFormProps {
  // form: { getFieldDecorator: any; };
  // form:any;
  projectData: ProjectsDto;
  saveProject: (projectData: ProjectsDto) => void;
  updateProject: (projectData: ProjectsDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
}

export const ProjectsForm = (props: IProjectFormProps) => {
   // console.log(props);
   const [form] = Form.useForm();
   const costCenterService = new CostcenterService();
   const stateService = new StateService();
   const getCopiedData = (): ProjectsDto => {
     return JSON.parse(JSON.stringify(props.projectData));
   };
   const [projectData, setProjectData] = useState<ProjectsDto>(getCopiedData);
  //  const [costCenterData,setcostCenterData] = useState([]);
   const [costCentersData, setcostCentersData] =useState([]);
   const [statesData, setstatesData] = useState([]);
  const saveData = (values) => {
    // console.log(values);
    values.startDate=new Date();
    if(values.projectId!=0){
      props.updateProject(values);
    }else{
      props.saveProject(values);
    }
  };


  // const getcostCenterData = async (e) =>{
  //   const costCenterReq: CostCenterRequest = {
  //     CostCenterId: e
  //   };
  //   await CostcenterService.getCostcenter(costCenterReq).then(res => {
  //     console.log(res);
  //     if(res){
  //       setcostCenterData(res);
  //     }else{
  //       setcostCenterData([]);
  //     }
  //   })
  // }
  const getAllcostCentersData = async () =>{
    await costCenterService.getAllCostcenters().then(res => {
      console.log(res);
      if(res){
        setcostCentersData(res.data);
      }else{
        setcostCentersData([]);
      }
    })
  }
  const getAllActiveStates = async () =>{
    await stateService.getAllActiveStates().then(res => {
      console.log(res);
      if(res){
        setstatesData(res.data);
      }else{
        setstatesData([]);
      }
    })
  }
  
  
  const onReset = () => {
    form.resetFields();
  };

  React.useEffect(() => {
   form.setFieldsValue({
      projectId:projectData.projectId,
      createdUser:projectData.createdUser, 
      projectCode:projectData.projectCode,
      projectName:projectData.projectName,
      otType:(projectData.otType)?projectData.otType:'SameDay',
      location:projectData.location,
      latitude:projectData.latitude,
      longitude:projectData.longitude,
      projectDescription:projectData.projectDescription,
      costCenterId:projectData.costCenterId,
      stateId:projectData.stateId,
    });
  getAllcostCentersData();
  getAllActiveStates();
  }, []);

  const costCenter = () => {
    if(costCentersData){
      return costCentersData.map(item => {
        return (
          <Option value={item.costCenterId}>
            {item.costCenterName}
          </Option>
        );
      })
    }
  }

  const state = () => {
    if(statesData){
      return statesData.map(item => {
        return (
          <Option value={item.stateId}>
            {item.stateName}
          </Option>
        );
      })
    }
  }

  // const { getFieldDecorator } = props.projectData;
  // function handleChange(value) {
  //   console.log(`selected ${value}`);
  // }
  
  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="projectId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>
      <Form.Item name="costCenterId" style={{display:'none;'}}
        // label="Cost Center"
        // rules={[
        //   {
        //     required: true,
        //     message: "Cost center is required"
        //   },
        // ]}
        >
        {/*    <Select placeholder='Please Select'>
             {costCenter()}
           </Select> */}
       <Input value='1' hidden /> 
      </Form.Item>
      <Form.Item
        name="projectCode"
        label="Project Code"
        rules={[
          {
            required: true,
            // pattern: /^[0-9a-zA-Z ]+$/,
            message:"project code is required"
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="projectName"
        label="Project Name"
        rules={[
          {
            required: true,
            pattern: /^[0-9a-zA-Z ]+$/,
            message: 'Project Name required',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="projectDescription"
        label="Project Description"
        rules={[
          {
            required: true,
            pattern: /^[0-9a-zA-Z ]+$/,
            message: 'Should be in Alphabet only',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="otType"
        label="OT Capture on"
        
        rules={[
          {
            required: true,
            message: "OT type is required"
          },
        ]}
      ><Select>
      <Option value='SameDay'>Same Day</Option>
      <Option value='NextDay'>Next Day</Option>
  </Select>
      </Form.Item>
      
      <Form.Item name="stateId"
        label="State"
        rules={[
          {
            required: true,
            message: "State is required"
          },
        ]}>
          <Select placeholder='Please Select' defaultValue={''}>
            {state()}
          </Select>
        
      </Form.Item>
      <Form.Item
        name="location"
        label="Location"
        rules={[
          {
            required: false,
            pattern: /^[A-Za-z ]+$/,
            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>
  );
};