import React, { useCallback, useId } from 'react';

import { ToggleFieldBox } from './ToggleField.styled';

export type ToggleFieldProps = {
  checked: boolean;
  disabled?: boolean;
  id?: string;
  onChange?: (checked: boolean) => void;
};

export const ToggleField: React.FunctionComponent<ToggleFieldProps> = ({
  onChange,
  checked = false,
  disabled = false,
  id: propId,
}) => {
  const reactId = `toggle-switch${useId()}`;
  const computedId = propId || reactId;
  const dataTestId = `ToggleField-input-${checked ? 'checked' : 'unchecked'}-${
    disabled ? 'disabled' : 'enabled'
  }`;
  const handleOnChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      typeof onChange === 'function' && onChange(event.target.checked);
    },
    [onChange],
  );
  const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation();
  }, []);

  return (
    <ToggleFieldBox data-testid="ToggleField-ToggleFieldBox" onClick={handleClick}>
      <input
        checked={checked}
        data-testid={dataTestId}
        disabled={disabled}
        id={computedId}
        type="checkbox"
        onChange={handleOnChange}
      />
      <label htmlFor={computedId}></label>
    </ToggleFieldBox>
  );
};