import { Icon } from '@iconify-icon/solid';
import { isNotNil } from 'es-toolkit';
import {
  createEffect,
  createMemo,
  createSignal,
  mergeProps,
  ParentComponent,
  ParentProps,
  Show,
} from 'solid-js';
import { Dynamic } from 'solid-js/web';

interface CheckBoxProps {
  name?: string;
  checked?: boolean;
  disabled?: boolean;
  onChange?: (checked?: boolean) => void;
}

const CheckIcon = [
  () => <Icon icon="hugeicons:square" class="text-[14px] stroke-1" />,
  () => <Icon icon="hugeicons:checkmark-square-03" class="text-[14px] stroke-1 text-primary" />,
];

const Check: ParentComponent<CheckBoxProps> = (props) => {
  const mProps = mergeProps<ParentProps<CheckBoxProps>[]>(
    {
      disabled: false,
    },
    props,
  );

  const originalChecked = createMemo(() => mProps.checked);
  const [internalChecked, setInternalChecked] = createSignal<boolean | undefined>(undefined);

  createEffect(() => {
    if (isNotNil(originalChecked()) && originalChecked() !== internalChecked()) {
      setInternalChecked(originalChecked());
    }
  });

  const handleClick = () => {
    if (mProps.disabled) {
      return;
    }
    setInternalChecked((prev) => !prev);
    mProps.onChange?.(internalChecked());
  };

  return (
    <div class="flex flex-row items-center gap-1 cursor-pointer" onClick={handleClick}>
      <Dynamic component={CheckIcon[internalChecked() ? 1 : 0]} />
      <div>{mProps.children}</div>
      <Show when={isNotNil(mProps.name)}>
        <input type="hidden" name={mProps.name} value={internalChecked()} />
      </Show>
    </div>
  );
};

export default Check;