import React,{ useState , useEffect } from 'react';
import { SketchPicker } from 'react-color';

function ColorCard({getColor,defaultColor}){
  const [ displayColorPicker , setDisplayColorPicker ] = useState(false);
  const [ textcolor , setTextColor ] = useState("#F17013");
 

  useEffect(()=>{
    if(defaultColor){
      setTextColor(defaultColor);
    }  
  },[defaultColor])

  // 切换色卡
  function handleChange(color){
    setTextColor(color.hex);
    getColor(color ? color.hex : defaultColor);
  }

  // 隐藏色卡
  function handleClick(){
    setDisplayColorPicker(!displayColorPicker);
    // reduction();
  }

  // 还原色卡
  function reduction(){
    setTextColor("#F17013");
    // setColor({r: '241',g: '112',b: '19',a: '1',});
  }
  return(
    <div>
      <div className="swatch" onClick={handleClick}>
        <div className="color" style={{backgroundColor:`${textcolor}`}}></div>
        <p style={{ paddingLeft: 5 }}>{textcolor}</p>
      </div>
      {displayColorPicker ? (
        <div className="popover">
          <div className="cover" onClick={()=>{setDisplayColorPicker(false)}} />
          <SketchPicker color={textcolor} onChange={handleChange} />
        </div>
      ) : null}
    </div>
  )
}
export default ColorCard;