import { createElement, render, useState } from 'rax';
import { ActionSheet, Button, ConfigProvider } 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 close = (key, message) => {
    if (key === 'open1') {
      setOpen1(false);
    } else if (key === 'open2') {
      setOpen2(false);
    }

    if (message) console.log(`close by ${message}`);
  };
  return (
    <ConfigProvider
      locale={{
        ActionSheet: {
          cancel: 'Отменить',
        },
      }}
    >
      <View>
        <Text className="demo-title">Locale</Text>
        <View className="demo-content btn-container">
          <Button type="primary" className="btn" onClick={() => setOpen1(true)}>
            多语言
          </Button>

          <Button type="primary" className="btn" onClick={() => setOpen2(true)}>
            自定义
          </Button>
        </View>

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

        <ActionSheet
          visible={open2}
          message={'Custom Cancel Example'}
          onClose={() => close('open2')}
          options={['option 1', 'option 2', 'option 3']}
          cancelText={'业务自定取消'}
        />
      </View>
    </ConfigProvider>
  );
}

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