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

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

export function MlRadio(props: MlRadioProps) {
  const handleChange = () => {
    if (!props.disable) {
      props.onChange?.(!props.checked, { 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 rounded-full border', {
          'bg-[--disable-bg-color]': props.disable,
          'bg-[--block-bg-color]': !props.disable,

          'border-primary': !props.disable && props.checked,
          'border-primary/50': props.disable && props.checked,
        })}
      >
        {props.checked ? (
          <View
            className={classNames('h-8/12 w-8/12 rounded-full', {
              'bg-primary': !props.disable && props.checked,
              'bg-primary/50': props.disable && props.checked,
            })}
          ></View>
        ) : null}
      </View>
    </View>
  );
}