import { useCallback } from 'react';
import { MoveSelector } from 'components';
import { ButtonController } from 'components/Calculator/elements';
import useStore from 'store';
import styles from './MoveController.module.scss';

interface MoveControllerProps {
  move: '1' | '2' | '3' | '4';
  pokemon: '1' | '2';
}

function MoveController({ move, pokemon }: MoveControllerProps): JSX.Element {
  const form = useStore(useCallback((state) => state.calcs[state?.selectedGame?.value]?.form, []));
  const update = useStore(useCallback((state) => state.updateDefaultValues, []));

  const handleMove = (moveId: number) => {
    update({ [`move${move}_${pokemon}`]: moveId });
  };

  return (
    <div className={styles.move} data-testid={`move${move}_${pokemon}`}>
      <MoveSelector
        currentMoveId={form[`move${move}_${pokemon}`]}
        handleMove={handleMove}
        limitGen={form.calculatorGen}
      />
      {form[`move${move}_${pokemon}`] && (
        <>
          <ButtonController label="Crit" name={`move${move}_crit${pokemon}`} />
          {form.calculatorGen > 6 && (
            <ButtonController label="Z" name={`move${move}_z${pokemon}`} />
          )}
        </>
      )}
    </div>
  );
}

export default MoveController;