import React, {useState} from 'react';
import reactCSS from 'reactcss';
import PropTypes from 'prop-types';
import { TwitterPicker } from 'react-color';
import '../Qrcode.css';

const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
    const [displayColorPicker, setDisplay] = useState(false);
    const styles = reactCSS({
        'default': {
            btn: {
                borderColor: displayColorPicker ? '#44D7B6' : null,
                color: displayColorPicker ? '#44D7B6' : null
            },
            container: {
                position: 'relative',
            },
            popover: {
                marginTop: '10px',
                position: 'absolute',
                right: '0',
                zIndex: '2',
            },
            cover: {
                position: 'fixed',
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
            },
        },
    });

    return (
        <div style={styles.container}>
            <button className="dl-btn" style={styles.btn} onClick={ () => setDisplay(!displayColorPicker) }>
                选择颜色
            </button>
            {
                displayColorPicker ?
                    <div style={styles.popover}>
                        <div style={styles.cover} onClick={() => setDisplay(false)} />
                        <TwitterPicker
                            key={"input_" + rendererIndex + "_" + paramIndex}
                            triangle="hide"
                            color={value}
                            colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
                            onChangeComplete={onChange}
                        />
                    </div>
                    :
                    null
            }
        </div>
    );
}

ParamColor.propTypes = {
    rendererIndex: PropTypes.number.isRequired,
    paramIndex: PropTypes.number.isRequired,
    value: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
}

export default ParamColor;