import React, {useState, Fragment} from 'react'
import { SketchPicker } from 'react-color'
import Dialog from '../Dialog'
import styles from './style.module.css'

interface Props {
  color: string,
  onChange: {
    (color: string): void
  }
}


function Color(props: Props) {
  let [show, setShow] = useState(false)
  let [color, setColor] = useState(props.color)

  return (
    <Fragment>
      <span
        style={{ backgroundColor: props.color }}
        className={styles.showcolor}
        onClick={ev =>setShow(true)}>
      </span>

      <Dialog 
        title="选择颜色"
        show={show}
        stateChange={(save: boolean) => {
          setShow(false);
          save && props.onChange(color)
      }}>
        <div className={styles.splayer} style={{textAlign: 'center'}}>
          <SketchPicker 
            color={color}
            onChange={s => setColor(`rgba(${s.rgb.r},${s.rgb.g},${s.rgb.b},${s.rgb.a})`)} />
        </div>
      </Dialog>
    </Fragment>
  )
}

export default Color