import { createElement, render, useState } from 'rax';
import { ActionSheet, Radio, Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

function App() {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const [open3, setOpen3] = useState(false);
  const [open4, setOpen4] = useState(false);
  const [open5, setOpen5] = useState(false);
  const [hasBadge, setBadge] = useState(false);
  const [badgeType, setBadgeType] = useState('normal');
  const [align, setAlign] = useState('left');

  const close = (key, message) => {
    if (key === 'open1') {
      setOpen1(false);
    } else if (key === 'open2') {
      setOpen2(false);
    } else if (key === 'open3') {
      setOpen3(false);
    } else if (key === 'open4') {
      setOpen4(false);
    } else if (key === 'open5') {
      setOpen5(false);
    }

    if (message) {
      console.log(`closed by ${message}`);
    }
  };
  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View className="demo-content btn-container">
        <Button type="primary" className="btn" onClick={() => setOpen1(true)}>
          Simple ActionSheet
        </Button>
      </View>

      <Text className="demo-title">Badge</Text>
      <View className="demo-content btn-container">
        <View className="demo-item-line">
          <View className="demo-item-name">Show Badge</View>
          <View className="demo-item-content">
            <Radio.Group
              direction="hoz"
              value={hasBadge}
              dataSource={[
                {
                  label: 'yes',
                  value: true,
                },
                {
                  label: 'no',
                  value: false,
                },
              ]}
              onChange={(v) => {
                setBadge(v);
              }}
            />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">Badge Type</View>
          <View className="demo-item-content">
            <Radio.Group
              direction="hoz"
              value={badgeType}
              disabled={!hasBadge}
              dataSource={['normal', 'dot']}
              onChange={(v) => {
                setBadgeType(v);
              }}
            />
          </View>
        </View>
        <View className="demo-item-line">
          <View className="demo-item-name">Align</View>
          <View className="demo-item-content">
            <Radio.Group
              direction="hoz"
              value={align}
              dataSource={['left', 'center', 'right']}
              onChange={(v) => {
                setAlign(v);
              }}
            />
          </View>
        </View>
        <Button type="primary" className="btn" onClick={() => setOpen2(true)}>
          Open Action Sheet
        </Button>
        <Button type="primary" className="btn" onClick={() => setOpen3(true)}>
          Open Action Sheet with Badge
        </Button>
      </View>

      <Text className="demo-title">Callback</Text>
      <View className="demo-content btn-container">
        <Button type="primary" className="btn" onClick={() => setOpen4(true)}>
          Callback
        </Button>
      </View>
      <Text className="demo-title">FullWidth</Text>
      <View className="demo-content btn-container">
        <Button type="primary" className="btn" onClick={() => setOpen5(true)}>
          non-fullWidth ActionSheet
        </Button>
      </View>

      <ActionSheet
        visible={open1}
        message={'Normal Example'}
        onClose={() => close('open1')}
        options={['option 1', 'option 2', 'option 3']}
        disabledIndexes={[0]}
        destructiveIndex={2}
      />

      <ActionSheet
        visible={open2}
        message={'请选择'}
        onClose={() => {
          close('open2');
        }}
        align={align}
        options={[
          {
            text: 'option 1',
            badge: hasBadge ? 99 : '',
            badgeType,
          },
          {
            text: 'option 2',
            badge: hasBadge ? 'NEW' : '',
            badgeType,
          },
        ]}
        disabledIndexes={[0]}
      />

      <ActionSheet
        visible={open3}
        message={'请选择，一段很长的提示一段很长的提示一段很长的提示'}
        onClose={(r) => {
          close('open3');
        }}
        disabledIndexes={[2]}
        align={align}
        options={[
          {
            text: '操作 1',
            icon: 'https://gw.alicdn.com/tfs/TB1DVLobSslXu8jSZFuXXXg7FXa-48-48.svg',
            badge: hasBadge ? '99' : '',
            badgeType,
          },
          {
            text: '操作 2',
            icon: 'https://gw.alicdn.com/tfs/TB1DVLobSslXu8jSZFuXXXg7FXa-48-48.svg',
            badge: hasBadge ? '99' : '',
            badgeType,
          },
          {
            text: '操作 3',
            icon: 'https://gw.alicdn.com/tfs/TB1DVLobSslXu8jSZFuXXXg7FXa-48-48.svg',
            badge: hasBadge ? 'NEW' : '',
            badgeType,
          },
        ]}
      />

      <ActionSheet
        visible={open4}
        message={'Callback Example'}
        onClick={(option, index) => {
          console.log('option click', { option, index });
        }}
        onClose={(reason) => {
          console.log('close reasion:', reason);
          close('open4');
        }}
        options={['option 1', 'option 2', 'option 3']}
      />

      <ActionSheet
        visible={open5}
        fullWidth={false}
        onClose={() => close('open5')}
        options={['option 1', 'option 2', 'option 3']}
      />
    </View>
  );
}

// render(<App />, null, { driver: DU });
 export default App