import { classNames } from 'mixlea-utils-js';
import { View } from '@tarojs/components';

import { MlIcon } from '../ml-icon';

import type { MlCheckboxProps } from './types';

export function MlCheckbox(props: MlCheckboxProps) {
  const isActive = useMemo(() => Boolean(props.checked || props.indeterminate), [props.checked, props.indeterminate]);

  const handleChange = () => {
    if (!props.disable) {
      props.onChange?.(!isActive, { dataset: props.dataset });
    }
  };

  return (
    <View
      className={classNames('flex items-center justify-center', {
        'h-full w-full': props.areaFill,
        'h-fit w-fit': !props.areaFill,
      })}
      onClick={handleChange}
    >
      <View
        className={classNames('h-mini w-mini flex items-center justify-center text-xs rounded', {
          'border': !isActive,
          'bg-[--disable-bg-color]': props.disable && !isActive,
          'text-white bg-primary/50': props.disable && isActive,

          'border-primary bg-primary text-white': !props.disable && isActive,
          'bg-[--block-bg-color]': !props.disable && !isActive,
        })}
      >
        {props.checked ? <MlIcon name="done" /> : props.indeterminate ? <MlIcon name="minus" /> : null}
      </View>
    </View>
  );
}