import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { Checkbox, Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import '../../components/index.css';

const styles = {
  app: {
    padding: '16rpx',
  },
  title: {
    fontWeight: 'bold',
    marginTop: '16rpx',
    marginBottom: '16rpx',
  },
  desc: {
    marginTop: '16rpx',
    marginBottom: '16rpx',
  },
  box: {
    marginTop: '16rpx',
    marginBottom: '16rpx',
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginTop: '8rpx',
    marginBottom: '8rpx',
  },
  btn: {
    marginTop: '20rpx',
    marginRight: '20rpx',
  },
};

const CheckboxDemo = () => {
  const [groupValue, setGroupValue] = useState([1, '3', '4']);
  const [isDisabled, setCheckGroupDisable] = useState(false);
  const [fruits, setFruits] = useState(['apple', 'banana', 'cherry']);

  const onValueChange = (value) => {
    console.log(value);
    setGroupValue(value);
  };

  return (
    <View>
      <Text className="demo-title">Group Usage</Text>
      <View className="demo-content">
        <View style={{ marginBottom: 20 }}>
          <View style={styles.row}>
            <Button
              style={styles.btn}
              size="small"
              model="outline"
              onClick={() => {
                setGroupValue(['1', '2', '3', '4', '5']);
              }}
            >
              check all
            </Button>
            <Button
              style={styles.btn}
              size="small"
              model="outline"
              onClick={() => {
                setGroupValue([]);
              }}
            >
              uncheck
            </Button>
            <Button
              style={styles.btn}
              size="small"
              model="outline"
              onClick={() => {
                setGroupValue([1, 2, '5']);
              }}
            >
              check 1,2,5
            </Button>
            <Button
              style={styles.btn}
              size="small"
              model="outline"
              onClick={() => {
                setCheckGroupDisable(!isDisabled);
              }}
            >
              toggle disable
            </Button>
          </View>
        </View>

        <View className="demo-item">
          <View>
            <Checkbox
              indeterminate={0 < groupValue.length && groupValue.length < 5}
              checked={groupValue.length === 5}
              onChange={(value) => {
                setGroupValue(value ? [1, 2, '3', '4', '5'] : []);
              }}
            >
              Select all
            </Checkbox>

            <Checkbox.Group
              value={groupValue}
              // direction="hoz"
              dataSource={[
                {
                  label: 'Checkbox 1',
                  value: 1,
                },
                {
                  label: 'Checkbox 2',
                  value: 2,
                },
                {
                  label: 'Checkbox 3',
                  value: '3',
                },
                {
                  label: 'Checkbox 4',
                  value: '4',
                  disabled: isDisabled,
                },
                {
                  label: 'Checkbox 5',
                  value: '5',
                  disabled: isDisabled,
                },
              ]}
              onChange={(v) => {
                onValueChange(v);
              }}
            />
          </View>
          <Text
            style={{
              border: '1px solid #209bfa',
              display: 'flex',
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            当前值： {groupValue.join(',')}
          </Text>
        </View>
      </View>
      <Text className="demo-title">Controlled</Text>
      <View className="demo-content">
        <View>
          <Checkbox.Group
            value={fruits}
            direction="horizontal"
            onChange={(value) => {
              console.log('value', value);
              setFruits(value);
            }}
            dataSource={['Apple', 'Banana', 'Cherry']}
          />
          <Button
            style={styles.btn}
            type="primary"
            model="outline"
            onClick={() => {
              setFruits(['banana', 'cherry']);
            }}
          >
            check [banana,cherry]
          </Button>
        </View>
      </View>
    </View>
  );
};

// render(<CheckboxDemo />, null, { driver: DriverUniversal });
 export default CheckboxDemo