import { BfCheckbox, BfCheckboxGroup } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [singleChecked, setSingleChecked] = useState(true);
  const [singleRoundChecked, setSingleRoundChecked] = useState(true);
  const [groupChecked, setGroupChecked] = useState<any[]>(['1']);

  return (
    <>
      <View className="group-title">BfCheckbox - 基本用法</View>
      <BfCheckbox
        id="1000"
        label="选项1"
        value="1"
        checked={singleChecked}
        onChange={(v, p) => {
          console.log('onChange===', v, p);
          setSingleChecked((pre) => !pre);
        }}
      />
      <View className="group-title">BfCheckbox - 半选</View>
      <BfCheckbox
        label="选项1"
        value="1"
        halfChecked
        onChange={(v, p) => {
          console.log('onChange===', v, p);
        }}
      />
      <View className="group-title">BfCheckbox - selectable</View>
      <BfCheckbox
        label="选项1"
        value="1"
        selectable
        checked={singleChecked}
        onChange={(v, p) => {
          console.log('onChange===', v, p);
          setSingleChecked((pre) => !pre);
        }}
        onLabelClick={({ label, value }) => {
          console.log('onLabelClick===', { label, value });
        }}
      />
      <View className="group-title">BfCheckbox - disabled=true</View>
      <BfCheckbox disabled label="选项1" value="1" checked />
      <View className="group-title">BfCheckbox - iconStyle="circle"</View>
      <BfCheckbox
        label="选项2"
        value="2"
        iconStyle="circle"
        checked={singleRoundChecked}
        onChange={() => setSingleRoundChecked((pre) => !pre)}
      />
      <BfCheckbox
        label="选项2-半选"
        value="2"
        iconStyle="circle"
        halfChecked={singleRoundChecked}
        onChange={() => setSingleRoundChecked((pre) => !pre)}
      />

      <View className="group-title">BfCheckboxGroup - 基本用法</View>
      <BfCheckboxGroup
        values={groupChecked}
        groups={[
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
          { label: '选项4', value: '4' },
          { label: '选项5', value: '5' },
          { label: '选项6', value: '6' },
          { label: '选项7', value: '7' },
        ]}
        onChange={(vals) => {
          setGroupChecked(vals);
        }}
      />
      <View className="group-title">BfCheckboxGroup - 垂直布局</View>
      <BfCheckboxGroup
        iconStyle="circle"
        values={['2']}
        groups={[
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
        ]}
        layout="vertical"
      />
    </>
  );
};