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

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

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;
    }
    console.debug('[Check]before', internalChecked());
    setInternalChecked((prev) => !prev);
    console.debug('[Check]after', internalChecked());
    mProps.onChange?.(internalChecked());
  };

  return (
    <div class="flex flex-row items-center gap-2 cursor-pointer" onClick={handleClick}>
      <Icon
        icon={internalChecked() ? 'hugeicons:checkmark-square-03' : 'hugeicons:square'}
        class="text-[14px] stroke-1"
        classList={{ 'text-primary': internalChecked() }}
      />
      <div>{mProps.children}</div>
      <Show when={isNotNil(mProps.name)}>
        <input type="hidden" name={mProps.name} value={internalChecked()} />
      </Show>
    </div>
  );
};

export default Check;