import { Button, ButtonGroup, Card, FormGroup, InputGroup, Overlay, TextArea } from "@blueprintjs/core"
import cs from "classnames"
import React, { useEffect, useState } from "react"
import style from "./dialog.module.scss"

export default function Dialog(props: any) {
  const { isOpen, setIsOpen } = props

  const [title, setTitle] = useState<string>("")
  const [time, setTime] = useState<string>("")
  const [desc, setDesc] = useState<string>("")

  function clickConfrim(){
    props.onConfrim&&props.onConfrim(title,time,desc)
  }
  function clickCancel(){
    setIsOpen(false)
    props.onCancel&&props.onCancel()
  }
  useEffect(()=>{
    if(isOpen){
      setTitle("")
      setTime("")
      setDesc("")
    }
  }, [isOpen])

  return (
    <Overlay
      isOpen={isOpen}
      onClose={() => {
        setIsOpen(false)
      }}
    >
      <div className={cs(style.dialog)}>
        <Card>
          <form className="addClock clearfix">
            <FormGroup label="标题" labelFor="title-input" labelInfo="(required)">
              <InputGroup value={title} onChange={e => setTitle(e.target.value)} id="title-input" placeholder="请输入标题"/>
            </FormGroup>
            <FormGroup helperText="一个通用的时间表示法" label="时间区间" labelFor="time-input" labelInfo="(required)">
              <InputGroup value={time} onChange={e => setTime(e.target.value)} id="time-input" placeholder="请输入时间区间"/>
            </FormGroup>
            <FormGroup label="描述" labelFor="desc-input">
              <TextArea value={desc} onChange={e => setDesc(e.target.value)} id="desc-input" style={{ width: "100%" }}
                        growVertically={true} large={true} intent="primary"/>
            </FormGroup>
            <ButtonGroup style={{ float: "right" }}>
              <Button
                intent="primary"
                onClick={()=>clickConfrim()}
              >
                确认
              </Button>
              <Button intent="danger" onClick={()=>clickCancel()}>取消</Button>
            </ButtonGroup>
          </form>
        </Card>
      </div>
    </Overlay>
  )
}