import React, {useState} from 'react';
import Button from 'lib/button';
import Modal from 'lib/modal';
import './index.scss';
import CodesWrapper from "../CodesWrapper";

const ModalExample = () => {
  const [isVisible, setVisible] = useState(false);
  const showModal = () => {
    setVisible(true);
  };
  const a = `onCancel={()=>{setVisible}}`;

  const buttonCodes = `
     const [isVisible, setVisible] = useState(false);
     const showModal = () => {
        setVisible(true);
     };
      
     <Button onClick={showModal}>Default</Button>
     <Modal visible={isVisible} title=\"弹窗标题\" ${a} onOk={() => { alert('onOk Click') }} >
       我是 modal
     </Modal>
  `;

  const component = (
    <div className="w-doc-button">
      <Button onClick={showModal}>Default</Button>
      <Modal
        visible={isVisible}
        title="弹窗标题"
        onCancel={() => {
          setVisible(false);
        }}
        onOk={() => {
          alert('onOk Click')
        }}
      >
        我是 modal
      </Modal>
    </div>
  );

  return (
    <CodesWrapper codes={buttonCodes} component={component} codeHeight={280}/>

  );
};

export default ModalExample;
