import * as React from "react";
import ReactDOM from "react-dom";
import Icon from 'lib/icon/icon';
import Button from 'lib/button';
import './index.scss';
import {useState} from "react";
import Modal from "../lib/modal";


import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/styles/hljs';
const xxx = () => {
  const codeString = '(num) => num + 1';
  return <SyntaxHighlighter language='javascript' style={docco}>{codeString}</SyntaxHighlighter>;
}

function App() {
  const [isLoading, setLoading] = useState(false);
  const [isModalVisible, setModalVisible] = useState(false);

  const onButtonClick = () => {
    console.log('button click');
  };
  const onButtonLoadingClick = () => {
    setLoading(true);
  };

  const showModal = () => {
    setModalVisible(true);
  };

  return (
    <div>
      <code>
        <div>
          {xxx()}
        </div>
      </code>
      <h2>Modal</h2>
      <Button onClick={showModal} type="primary">show Modal</Button>
      <Modal
        visible={isModalVisible}
        title="弹窗标题"
        onCancel={()=> {setModalVisible(false)}}
      >
        我是 modal

      </Modal>
      <h2>Icon</h2>
      <Icon onClick={test} onMouseEnter={test} name="car" className="wrapper inner"/>
      <hr/>
      <h2>Button</h2>
      <div className="button-wrapper">
        <h3>Click with wave animation</h3>
        <Button onClick={onButtonClick} >Default</Button>
        <Button onClick={onButtonClick} type="dark">Dark</Button>
        <Button onClick={onButtonClick} type="primary">Primary</Button>
        <Button onClick={onButtonClick} type="danger">Danger</Button>
        <Button onClick={onButtonClick} type="warning">Warning</Button>
        <Button onClick={onButtonClick} type="success">Success</Button>
        <Button onClick={onButtonClick} type="midnightBlue">MidnightBlue</Button>
      </div>
      <div className="button-wrapper">
        <h3>Click to show loading status</h3>
        <Button onClick={onButtonLoadingClick} loading={isLoading}>Default</Button>
      </div>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

function test() {
  console.log('Icon click');
}

