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

import './index.css';

const DialogDemo = () => {
  const [dialog1, setDialog1] = useState(false);
  const [dialog2, setDialog2] = useState(false);
  const [dialog3, setDialog3] = useState(false);
  const [dialog4, setDialog4] = useState(false);
  const [dialog5, setDialog5] = useState(false);
  const [dialog6, setDialog6] = useState(false);

  return (
    <View>
      <Text className="demo-title">Footer</Text>
      <View className="demo-content">
        <Button
          className="btn"
          type="primary"
          onClick={() => {
            setDialog1(true);
          }}
        >
          no footer
        </Button>
        <Button
          className="btn"
          type="primary"
          onClick={() => {
            setDialog2(true);
          }}
        >
          ok
        </Button>
        <Button
          className="btn"
          type="primary"
          onClick={() => {
            setDialog3(true);
          }}
        >
          ok,cancel
        </Button>
        <Button
          className="btn"
          type="primary"
          onClick={() => {
            setDialog4(true);
          }}
        >
          cancel, ok
        </Button>
      </View>
      <Text className="demo-title">Custom Button</Text>
      <View className="demo-content row">
        <Button
          className="btn"
          type="primary"
          onClick={() => {
            setDialog5(true);
          }}
        >
          custom button type
        </Button>
        <Button
          className="btn"
          type="primary"
          onClick={() => {
            setDialog6(true);
          }}
        >
          custom button text
        </Button>
      </View>

      <Dialog visible={dialog1} title="no footer" footer={false} content="[]" onClose={() => setDialog1(false)} />
      <Dialog visible={dialog2} title="ok" footerActions={['ok']} content="[ok]" onClose={() => setDialog2(false)} />
      <Dialog
        visible={dialog3}
        title="ok,cancel"
        footerActions={['ok', 'cancel']}
        content="['ok', 'cancel']"
        onClose={() => setDialog3(false)}
      />
      <Dialog
        visible={dialog4}
        title="cancel, ok"
        footerActions={['cancel', 'ok']}
        content="default"
        onClose={() => setDialog4(false)}
      />
      <Dialog
        visible={dialog5}
        title="custom button props"
        content="okProps,cancelProps 接受所有 Button 参数"
        okProps={{
          type: 'warning',
          model: 'outline',
        }}
        cancelProps={{
          type: 'primary',
          model: 'solid',
        }}
        onClose={() => setDialog5(false)}
      />
      <Dialog
        visible={dialog6}
        title="custom button text"
        content="在多语言优先级之上， 业务自定义按钮文案"
        okProps={{
          text: '自定义确认',
        }}
        cancelProps={{
          text: '自定义取消',
        }}
        onClose={() => setDialog6(false)}
      />
    </View>
  );
};

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