import React, { ChangeEvent } from 'react';

export interface CheckboxProps {
  /**
   * A function that will run after the input  has changed, it will return the value of the input for you to use in the parent component.
   */
  callback: (e: ChangeEvent<HTMLInputElement>, id: string) => void;

  /**
   * Should the checkbox show as checked or not.
   */
  checked: boolean;

  /**
   * A custom data attribute value you can pass to hook into the input if needed.
   */
  dataAttr?: string;
  /**
   * Should the input be disabled or not. Use with a state var to determine when the input can be edited.
   */
  disabled: boolean;
  /**
   * An id to be added to the input itself, not the wrapping label.
   */
  id: string;
  /**
   * Classes to be added to the wrapping label.
   */
  theme?: string;
  /**
   * The label text title of the input.
   */
  title: string | React.ReactNode;
  /**
   * The value of the checkbox, will be accessible as part of "e" in the callback
   */
  value: string;
  /**
   * The spacing of the text as a tailwind class, defaults to `pl-3`.
   */
  spacing?: string;
  /**
   * Classes to be added to the input element.
   */
  inputTheme?: string;
  /**
   * Classes to be added to the checkmark element.
   */
  checkTheme?: string;
  /**
   * Is the checkbox controlled or not. If so, this should be true. If not, leave it undefined.
   */
  controlled?: boolean;
}

const Checkbox = ({
  callback,
  checked,
  dataAttr = '',
  disabled,
  id,
  theme = '',
  title,
  value,
  spacing = 'pl-3',
  inputTheme = '',
  checkTheme = '',
  controlled,
}: CheckboxProps) => (
  <label
    htmlFor={id}
    className={`flex items-center text-xs group ${
      disabled ? 'cursor-default' : 'cursor-pointer'
    } ${theme}`}
    data-c="slmr--Checkbox"
  >
    <input
      className="sr-only peer"
      data-attr={dataAttr}
      defaultChecked={checked}
      disabled={disabled}
      onChange={(e) => callback(e, id)}
      type="checkbox"
      value={value}
      name={id}
      id={id}
      checked={controlled ? checked : undefined}
      aria-current={controlled ? checked : undefined}
    />
    <div
      className={`relative flex justify-center w-6 h-6 border-2 border-gray-400 bg-_-nib-legacyText text-white peer-focus:outline-black peer-focus:outline-dashed peer-focus:outline-1 peer-focus-visible:outline-black peer-focus-visible:outline-dashed peer-focus-visible:outline-1 peer-checked:bg-_-misc-selectedMedium peer-checked:border-_-misc-selectedDark group-hover:border-_-misc-selectedMedium group-hover:text-_-misc-selectedLight group-hover:bg-_-misc-selectedLight group-hover:peer-checked:text-_-states-accent group-hover:peer-checked:border-_-states-accent group-hover:peer-checked:bg-_-states-accentLight group-hover:peer-disabled:text-opacity-0 group-hover:peer-checked:peer-disabled:text-opacity-100 group-hover:peer-checked:peer-disabled:text-_-imperfect-400/20 group-hover:peer-disabled:bg-_-imperfect-400/20 group-hover:peer-disabled:border-_-imperfect-400/20 peer-disabled:bg-_-imperfect-400/20 peer-disabled:border-_-imperfect-400/20 peer-disabled:text-opacity-0 peer-checked:peer-disabled:text-opacity-100 peer-checked:peer-disabled:text-_-imperfect-400/20 ${inputTheme}`}
    >
      <div className={`fa fa-check p-1 aspect-square ${checkTheme}`} />
    </div>
    <span
      className={`peer-disabled:text-_-imperfect-400/40 group-hover:peer-disabled:text-_-imperfect-400/40 group-hover:peer-checked:peer-disabled:text-_-imperfect-400/40 ${spacing}`}
    >
      {title}
    </span>
  </label>
);

export default Checkbox;