import React from 'react';
import { Menu, Dropdown, Button } from 'antd';
//import Scroll from '../component/Slider';
// 화살표 함수에서 {} 가 들어가는 경우에는 처리해야 되는 루틴이 있을때 return 값만 있을때는 () or 생략도 가능하다.
//

//기본적인 도형들을 그리는 도형상수
const draw = () => (
  <Menu>
    <Menu.Item>
      <button onclick="">Triangle</button>
    </Menu.Item>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.taobao.com/">
        Rectangle
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        pentagon
      </a>
    </Menu.Item>
    <Menu.Item danger>도형 디자인</Menu.Item>
  </Menu>
);

//기본적인 그래프를 그리는 그래프 상수
const graph = () => (
  <Menu>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.alipay.com/">
        2차함수
      </a>
    </Menu.Item>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.taobao.com/">
        3차함수
      </a>
    </Menu.Item>

    <Menu.Item danger>함수 디자인</Menu.Item>
  </Menu>
);

// x축 y축을 그리게 만드는 상수
const grid = () => (
  <Menu>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.alipay.com/">
        2차원
      </a>
    </Menu.Item>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.taobao.com/">
        3차원
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        3rd menu item
      </a>
    </Menu.Item>
    <Menu.Item danger>좌표축 디자인</Menu.Item>
  </Menu>
);

// 수학 공식들을 선택하는 상수
const MathFunction = () => (
  <Menu>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.alipay.com/"></a>
    </Menu.Item>
    <Menu.Item>
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://www.taobao.com/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        3rd menu item
      </a>
    </Menu.Item>
    <Menu.Item danger>a danger item</Menu.Item>
  </Menu>
);

//위의 상수 값들을 집어넣어 Dropdowm 메뉴 바들을 구성해준다.
const DropMenu = () => (
  //위의 상수 값들을 집어넣어 Dropdowm 메뉴 바들을 구성해준다. const DropMenu

  <div style={{ display: 'inline-block' }}>
    <Dropdown overlay={draw} placement="bottomLeft" arrow>
      <Button>Draw</Button>
    </Dropdown>
    <Button>Graph</Button>

    <Dropdown overlay={grid} placement="bottomRight" arrow>
      <Button>Grid</Button>
    </Dropdown>
    <Dropdown overlay={MathFunction} arrow>
      <Button>Function</Button>
    </Dropdown>
  </div>
);
export default DropMenu;

//<Scroll> </Scroll>