import React, { useState } from 'react';

import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import { UseFormReturn } from 'react-hook-form';
import NumberField from './NumberField';
import { Trans, t } from '@lingui/macro';
import { i18n } from '@lingui/core';

type CounterFormProps = {
  formMethods: UseFormReturn;
  counterName: string;
  newCounterName: string;
};
const CounterForm: React.FC<CounterFormProps> = ({
  formMethods,
  counterName,
  newCounterName
}) => {
  const [haveNewCounter, _toggle] = useState(false);
  const { register } = formMethods;
  function toggleNewCounter() {
    _toggle(v => !v);
  }

  const newCounterView = haveNewCounter && (
    <div>
      <NumberField
        name={newCounterName}
        {...register(newCounterName, { required: true })}
        label={<Trans>New counter</Trans>}
        placeholder={i18n._(t`newcounterPlaceholder`)}
        // placeholder="Hier Zählerstand des neuen Zählers eintragen"
        variant='standard'
        InputLabelProps={{
          shrink: true, // Sorgt dafür, dass das Label immer oben bleibt
        }}
      />
    </div>
  );

  return (
    <>
      <div>
      <NumberField
          {...register(counterName, { required: true })}
          label={<Trans>Old Counter</Trans>}
          placeholder={i18n._(t`counterPlaceholder`)} 
          // placeholder="Hier Zählerstand des alten Zählers eintragen"
          variant="outlined"
          InputLabelProps={{ shrink: true }}
        />

      </div>
      <div>
        <FormControlLabel
          control={
            <Checkbox checked={haveNewCounter} onChange={toggleNewCounter} />
          }
          label={<Trans>switch counter</Trans>}
        />
      </div>
      {newCounterView}
    </>
  );
};

export default CounterForm;