import { Trans } from '@lingui/macro';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import { UseFormReturn } from 'react-hook-form';
import NumberField from './NumberField';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

const CenterDiv = styled.div`
  text-align: center;
`;

type StockCounterType = 'out' | 'in' | 'absolute';
type StockCounterProps = {
  typeFieldName: string;
  numberFieldName: string;
  formMethods: UseFormReturn;
};
const StockCounter: React.FC<StockCounterProps> = ({
  typeFieldName,
  numberFieldName,
  formMethods
}) => {
  const [type, setType] = useState<StockCounterType>('out');
  const { setValue, register } = formMethods;
  const handleTypeChange = (e, value) => {
    if (value === null) {
      setType(prev => prev);
      setValue(typeFieldName, type);
      return;
    }
    setType(value);
    setValue(typeFieldName, value);
  };

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

  return (
    <>
      <CenterDiv>
        <ToggleButtonGroup
          size='small'
          value={type}
          onChange={handleTypeChange}
          exclusive
        >
          <ToggleButton value='out'>
            <Trans>Out</Trans>
          </ToggleButton>
          <ToggleButton value='in'>
            <Trans>In</Trans>
          </ToggleButton>
          <ToggleButton value='absolute'>
            <Trans>Absolute</Trans>
          </ToggleButton>
        </ToggleButtonGroup>
      </CenterDiv>
      <div>
        <NumberField
          {...register(numberFieldName, { required: true })}
          label={<Trans>Value</Trans>}
        />
      </div>
    </>
  );
};

export default StockCounter;