import { Checkbox } from '@taroify/core';
import { CheckboxProps, CheckboxGroupProps } from '@taroify/core/checkbox';
import CheckboxGroupContext from '@taroify/core/checkbox/checkbox-group.context';
import { useContext } from 'react';

import './index.less';

interface IProps extends CheckboxProps {
  text: string;
}

interface IGroupProps extends CheckboxGroupProps {
  value: BL.Anything[];
}

const PREFIX = 'profile-checkbox';

export function BlCheckboxGroup({ value, onChange, children }: IGroupProps) {
  return (
    <Checkbox.Group className={`${PREFIX}__group`} value={value} onChange={onChange}>
      {children}
    </Checkbox.Group>
  );
}

export function BlCheckbox(props: IProps) {
  const { name, text } = props;
  const { value: names = [], onChange: onNamesChange } = useContext(CheckboxGroupContext);
  const checked = names.includes(name);
  const handleClick = () => {
    if (!name) return;

    if (checked) {
      onNamesChange?.(names.filter(aName => aName !== name));
    } else {
      onNamesChange?.([...names, name]);
    }
  };

  return (
    <Checkbox className={`${PREFIX}__item ${checked ? 'active' : ''}`} name={name} icon={null} onClick={handleClick}>
      {text}
    </Checkbox>
  );
}