import React, { useEffect, useState } from 'react';
import { Button, Card, Col, DatePicker, Form, Input, Row, Select, message } from 'antd'
import {  Link, useHistory } from "react-router-dom";
import { CurrencyService, ExchangeRatesService } from '@gtpl/shared-services/masters';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import './exchange-rates.css';
import { ExchangeRatesRequest } from '@gtpl/shared-models/masters';
import moment from 'moment';

/* eslint-disable-next-line */
export interface ExchangeRatesFormProps {}

export function ExchangeRatesForm(
  props: ExchangeRatesFormProps
) {
  const [form] = Form.useForm()
  const {Option} = Select
  let history = useHistory();

  const [ currencyData, setCurrencyData ] = useState<any[]>([])
  const currencyService = new CurrencyService()
  const exchangeService = new ExchangeRatesService()

  useEffect(()=>{
    getAllCurrencies()
  },[])

  const getAllCurrencies = () =>{
    currencyService.getAllActiveCurrencys().then((res)=>{
      setCurrencyData(res.data)
    })
  }

  const saveData = (data: ExchangeRatesRequest)=>{
    const dataReq = new ExchangeRatesRequest(data.id,form.getFieldValue('effectiveFrom').format('YYYY-MM-DD'),'Admin',null,form.getFieldValue('exchangeRate'),form.getFieldValue('currencyId'))
    exchangeService.createExchangeRate(dataReq).then(res=>{
      if(res.status){
        message.success(res.internalMessage,2)
        history.push('/exchange-rate-grid')
      }else{
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

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


  return (
    <div>
        <Card 
        title='Exchange Rate' 
        size='small'
        style={{color:'white'}} 
        headStyle={{ backgroundColor: "#69c0ff", border: 0 }}
        extra={
            <Link to= '/exchange-rate-grid'>
                    <Button className='panel_button'>
                        View
                    </Button>
            </Link>
        }>
            <Form form={form} 
            layout='vertical' 
            name='control-hooks'
            onFinish={saveData}
            >
                <Form.Item name='id' style={{display:'none'}}>
                    <Input hidden/>
                </Form.Item>
                <Row gutter={[16, 16]}>
                    <Col xs={24} sm={12} md={8}>
                        <Form.Item
                        name={'currencyId'}
                        label={'Currency'}
                        rules={[{required:true,message:"Currency is required"}]}
                        >
                            <Select
                            allowClear
                            showSearch
                            optionFilterProp='children'
                            placeholder='Select Currency'
                            >
                                {currencyData.map((e)=>{
                                    return(
                                        <Option key={e.currencyId} value={e.currencyId}>
                                            {e.currencyName}
                                        </Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col xs={24} sm={12} md={8}>
                        <Form.Item 
                        name={'effectiveFrom'}
                        label={'Effective From'}
                        initialValue={moment()}
                        rules={[
                          {
                            required: true,
                            message: 'Effective From date is required'
                        },            
                        ]}
                        >
                          <DatePicker showToday style={{width:'100%'}} format="YYYY-MM-DD"/>
                        </Form.Item>
                    </Col>
                    <Col xs={24} sm={12} md={8}>
                        <Form.Item 
                        name={'exchangeRate'}
                        label={'Exchange Rate'}
                        rules={[
                            {
                                required: true,
                                message: 'Exchange Rate is required'
                            },
                            {
                              pattern: /^\d+(\.\d{1,3})?$/,
                              message: 'Please enter a number up to three decimal places.'
                            }                                              
                        ]}
                        >
                            <Input placeholder='Enter Exchange Rate'/>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24} justify="end">
                    <Col>
                        <Button type='primary' htmlType='submit' size="middle">Submit</Button>
                    </Col>
                    <Col>
                            <Button htmlType='button' danger type='default' size="middle" onClick={onReset}>Reset</Button>
                    </Col>
                </Row>
            </Form>
        </Card>
    </div>
  )
}

export default ExchangeRatesForm;