import {
  Radio as OldRadio,
  RadioProps,
  ConfigProvider,
  RadioGroupProps,
} from 'antd';
import React, { useContext, useMemo } from 'react';
import './index.less';
import classNames from 'classnames';
import { RadioButtonProps } from 'antd/lib/radio/radioButton';
import { Icon } from '../Icon';

interface RadioExtraProps {}

const Radio = (props: RadioProps & RadioExtraProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-radio');

  return (
    <OldRadio
      {...props}
      className={classNames(`${prefixCls}-box`, props.className)}
    >
      {props.children}
    </OldRadio>
  );
};

/**
 * @secondarySolid 填充型——白底蓝字
 * @solid 填充型——蓝底白字
 * @outline 边框型——蓝字白底
 * @secondaryOutline 边框型——白字蓝底
 * */
interface GroupExtraProps {
  buttonStyle?: 'outline' | 'solid' | 'secondarySolid' | 'secondaryOutline';
}

const Group = (
  props: Omit<RadioGroupProps, 'buttonStyle'> & GroupExtraProps,
) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-radio-group');

  const { buttonStyle = 'outline' } = props;

  return (
    <OldRadio.Group
      {...props}
      className={classNames(
        `${prefixCls}-box`,
        `${prefixCls}-${buttonStyle}`,
        props.className,
      )}
      buttonStyle="outline"
    >
      {props.children}
    </OldRadio.Group>
  );
};

Radio.Group = Group;

interface ButtonExtraProps {
  iconName?: string;
}

const Button = (
  props: RadioButtonProps & React.RefAttributes<any> & ButtonExtraProps,
) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-radio-button');

  const { iconName } = props;

  // 三种情况要用不同的类名：文字，图标，文字+图标(灬ꈍ ꈍ灬)
  const ctxType = useMemo(() => {
    let res = `${prefixCls}-ctx`;
    if (iconName) {
      res = `${res}-icon`;
    }
    if (props.children) {
      res = `${res}-font`;
    }
    return res;
  }, [iconName, props.children]);

  return (
    <>
      <OldRadio.Button
        {...props}
        className={classNames(`${prefixCls}-box`, props.className)}
      >
        <div
          className={ctxType}
          style={{ display: 'flex', alignItems: 'center' }}
        >
          {iconName ? <Icon iconName={iconName}></Icon> : ''}
          {props.children}
        </div>
      </OldRadio.Button>
    </>
  );
};

Radio.Button = Button;

export { Radio };