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

const openActionSheet = () => {
  ActionSheet.show({
    message: '请选择操作',
    options: ['操作 1', '操作 2', '操作 3', '操作 4'],
    destructiveIndex: 2,
    disabledIndexes: [0, 1],
    onClick: (option, index) => {
      console.log('selected:', option, index);
    },
    onClose: (reason) => {
      console.log('closed by ', reason);
    },
  });
};

const openActionSheet2 = () => {
  ActionSheet.show({
    message: '请选择操作',
    options: [
      {
        text: 'option 1',
        icon: 'https://gw.alicdn.com/tfs/TB1DVLobSslXu8jSZFuXXXg7FXa-48-48.svg',
      },
      {
        text: 'option 2',
        icon: 'https://gw.alicdn.com/tfs/TB1DVLobSslXu8jSZFuXXXg7FXa-48-48.svg',
        badge: '99',
      },
      {
        text: 'option 3',
        icon: 'https://gw.alicdn.com/tfs/TB1DVLobSslXu8jSZFuXXXg7FXa-48-48.svg',
        badgeType: 'dot',
      },
    ],
    cancelText: '我再想想',
    destructiveIndex: 2,
    disabledIndexes: [0, 1],
    onClick: (option, index) => {
      console.log('selected:', option, index);
    },
    onClose: (reason) => {
      console.log('closed by ', reason);
    },
  });
};

const ActionSheetDemo = () => {
  return (
    <View>
      <Text className="demo-title">Quick Call</Text>
      <View className="demo-content btn-container">
        <Button
          type="primary"
          model="outline"
          className="btn"
          onClick={() => {
            openActionSheet();
          }}
        >
          open ActionSheet
        </Button>

        <Button
          type="primary"
          model="outline"
          className="btn"
          onClick={() => {
            openActionSheet2();
          }}
        >
          open ActionSheet with icon
        </Button>
      </View>
    </View>
  );
};

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