import React, { Component } from 'react';
import { Col, Container, Form, Row, Button, Modal, Dropdown, DropdownButton } from 'react-bootstrap';
import PropTypes from 'prop-types';
import Charts from '../pages/Charts/Charts';
import { SketchPicker } from 'react-color';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChartPie, faChartLine, faChartBar } from '@fortawesome/free-solid-svg-icons';

const chartTypes = ['Bar', 'Line', 'Polar', 'Doughnut', 'Pie','HorizontalBar',];

const pieIcon = <FontAwesomeIcon icon={faChartPie} />;
const lineIcon = <FontAwesomeIcon icon={faChartLine} />;
const barIcon = <FontAwesomeIcon icon={faChartBar} />;
const polarIcon = pieIcon; // no polar chart icon in free-solid-svg-icons
const doughnutIcon = pieIcon; // no doughnut chart icon in free-solid-svg-icons

const chartTypeIcons = {
    Bar: barIcon,
    Line: lineIcon,
    Polar: polarIcon,
    Doughnut: doughnutIcon,
    Pie: pieIcon
};

class CharSelector extends Component {
    state = {
        selected: 'Bar',
        color: {
            r: '75',
            g: '192',
            b: '192',
            a: '1',
        },
        colorPickerOn: false,
    }

    handleSelect = (key, e) => {
        this.setState({ selected: key });
    }

    handleColors = (picked) => {
        this.setState({ color: picked });
    }

    handleColor = (e) => {
        this.setState({ color: e.rgb, colorPickerOn: false });
    }

    handleColorPicker = (e) => {
        this.setState({ colorPickerOn: !this.state.colorPickerOn });
    }

    handleModalClose = (e) => {
        this.setState({ colorPickerOn: false });
    }

    refreshData = () => {
        this.props.onRefreshData();
    }

    render() {
        const { selected, color, colorPickerOn } = this.state;
        const { data, labels } = this.props;
        return (
            <Container>
                <Form inline className="justify-content-center mb-3">
                    <Form.Label className="mr-2">
                        Select Chart Type
                    </Form.Label>
                    <DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
                        {chartTypes.map((item, i) =>
                            <Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
                        )}
                    </DropdownButton>
                    <span>&nbsp;</span>
                    <Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
                    <Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
                    <Modal show={colorPickerOn} onHide={this.handleModalClose}>
                        <Modal.Header closeButton>
                            Color Picker
                        </Modal.Header>
                        <Modal.Body>
                            <SketchPicker
                                width="95%"
                                color={this.state.color}
                                onChangeComplete={this.handleColor}
                            />
                        </Modal.Body>
                    </Modal>
                </Form>
                <Row>
                    <Col>
                        <Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
                    </Col>
                </Row>
            </Container>
        )
    }
}

export default CharSelector;

CharSelector.propTypes = {
    data: PropTypes.array.isRequired,
    labels: PropTypes.array.isRequired
}