import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Select,Card, Row, Col } from 'antd';
import {  Link, useHistory } from "react-router-dom";
import form from 'antd/lib/form';
import './soak-style-form.css';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {SoakStyleMappingService} from '@gtpl/shared-services/masters'
import { SoakStyleDto } from '@gtpl/shared-models/masters';

/* eslint-disable-next-line */
export interface SoakStyleFormProps {
  soakStyleData:any;
  UpdateSoakstyle:(soakStyle:SoakStyleDto)=>void;
  isUpdate:boolean;
  closeForm: () => void;
  setDrawerVisble:any;
  getSoakStyle?:() => void;
  initialValues?: any[];
}

const  SoakStyleForm = (props: SoakStyleFormProps) => {

  const { Option } = Select;
  const [disable, setDisable] = useState<boolean>(false)
  const SoakService= new SoakStyleMappingService()
  



  const [form] = Form.useForm();
  let history = useHistory();

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


  const createSoakstyleData=(soakReq:SoakStyleDto)=>{
    setDisable(true)

    SoakService.createSoaks(soakReq).then(res => {
      setDisable(false)
      if (res.status) {
        AlertMessages.getSuccessMessage('Soak Style Created Successfully');
        history.push("/soakstyle-grid");
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }
  
  const saveData = (values: SoakStyleDto) => {
    setDisable(false)

    if(props.isUpdate){      
      props.UpdateSoakstyle(values);
    }else{
      setDisable(false)
      createSoakstyleData(values);
    }
  
  };

  
  const onReset=()=>{
    form.resetFields();
    
  }
  const onFocus=() =>{
  }
  
  const onSearch=(val)=> {
  }
  const onBlur=() =>{
  }

  return (
    <Card title={<span style={{color:'white'}}> SoakStyle </span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={(props.isUpdate==false) && <Link to='/soakstyle-grid' ><Button className='panel_button' >View </Button></Link>}
    >
      <Form layout="vertical" form={form} initialValues={props.initialValues} name="control-hooks" onFinish={saveData}>
      <Form.Item name="soakstyleId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
    <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
      <Input hidden/>
    </Form.Item>
    <Row >
   
    
          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="soakstyle"
                  label="Soak Style"
                  rules={[
                    {
                      required: true,message:'soak style is required'
                      
                    }, 
                    {
                      pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                      message: `Don't Allow Spaces`
                    }
                  ]}>
                  <Input   placeholder="Enter Soak Style" /> 
            </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 SoakStyleForm;