import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import { Trans,t } from '@lingui/macro';
import { useForm } from 'react-hook-form';
import React, { useEffect, useState } from 'react';
import moment, { Moment } from 'moment';
import styled from 'styled-components';
import { CounterType } from 'B/constants';
import axios from 'B/axios';
import Counter from './Counter';
import DatetimePicker from './DatetimePicker';
import StockCounter from './StockCounter';
import I18nProvider from 'B/I18nProvider';

const SubmitArea = styled.div`
  display: flex;
  align-items: center;
  padding: 8;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin: 1em 0;
`;

type StockCounterDataType = {
  type: 'out' | 'in' | 'absolute';
  value: string;
  datetime: Moment;
};

type CounterDataType = {
  value: string;
  newValue: string;
  datetime: Moment;
};

type FormProps = {
  resourceID: number;
  counterType?: CounterType;
  closeDialog: () => void;
};

const MarginBox = styled.div`
  margin: 1.3em 0;
`;
 const Form: React.FC<FormProps> = ({
  counterType,
  resourceID,
  closeDialog
}) => {
  const [datetime, _setDatetime] = useState(moment);
  const formMethods = useForm({
    defaultValues: { datetime: datetime, type: 'out' }
  });
  const [submitFailed, setSubmitFaild] = useState(false);
  const { register, setValue, handleSubmit } = formMethods;
  const isTypeWithdrawal = counterType === CounterType.Withdrawal;

  useEffect(() => {
    register('datetime');
  }, [register]);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const handleDateTimeChange = (m, v: string) => {
    _setDatetime(m);
    setValue('datetime', m);
  };

  const onsubmit = async d => {
    const data: CounterDataType | StockCounterDataType = d;
    let value = Number(data.value);
    let request: any = {};
    if (isTypeWithdrawal) {
      switch ((d as StockCounterDataType).type) {
        case 'out':
          request.difference = value * -1;
          break;
        case 'in':
          request.difference = value * 1;
          break;
        case 'absolute':
          request.value = value * 1;
          break;

        default:
          value = value * 1;
          break;
      }
    } else {
      const newCounterValue = (d as CounterDataType).newValue;
      if (newCounterValue !== undefined) {
        request.difference = newCounterValue;
        request.value = value;
      } else {
        request.value = value;
      }
    }

    const datetime = d.datetime.format();
    request.time = datetime;
    request.agbId = resourceID;

    try {
      await axios.post('erg/new/measurement', request);
      setSubmitFaild(false);
      closeDialog();
    } catch (e) {
      setSubmitFaild(true);
    }
  };

  const datetimeView = (
    <MarginBox>
      <DatetimePicker onChange={handleDateTimeChange} value={datetime} />
    </MarginBox>
  );

  let formView;
  if (isTypeWithdrawal) {
    formView = (
      <MarginBox>
        <StockCounter
          typeFieldName={'type'}
          numberFieldName={'value'}
          formMethods={formMethods}
        />
      </MarginBox>
    );
  } else {
    formView = (
      <MarginBox>
        <Counter
          counterName={'value'}
          newCounterName={'newValue'}
          formMethods={formMethods}
        />
      </MarginBox>
    );
  }

  const alertView = submitFailed && (
    <Alert variant='filled' severity='error'>
      <Trans>Error -- Report ID: {resourceID}</Trans>
    </Alert>
  );

  return (
    <>
    <I18nProvider>
      {alertView}
      <form onSubmit={handleSubmit(onsubmit)}>
        {formView}
        {datetimeView}
        <SubmitArea>
          <Button type='submit' color='primary' variant='contained'>
            <Trans>Submit</Trans>
          </Button>
        </SubmitArea>
      </form>
      </I18nProvider>
    </>
  );
};
export default Form;