import { cloneDeep } from 'lodash-es';
import PropTypes from 'prop-types';
import React from 'react';
import {
  Button,
  Col,
  ControlLabel,
  FormControl,
  FormGroup,
  Grid,
  OverlayTrigger,
  Panel,
  Popover,
  Row,
} from 'react-bootstrap';
import { GithubPicker } from 'react-color';
import UI from '../../../config/ui/config';

function renderPopoverColorPickerBottom(callback) {
  return (
    <Popover id="popover-positioned-bottom" title="Select a color">
      <GithubPicker triangle="hide" width="230px" onChangeComplete={callback} />
    </Popover>
  );
}

/**
 * React component used to edit or create a tag
 */
class NewOrEditTagPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tag: cloneDeep(this.props.tag) || {
        name: '',
        description: '',
        color: UI.logbook.DEFAULT_TAG_COLOR,
        investigationId: this.props.investigationId,
      },
    };

    this.onChangeComplete = this.onChangeComplete.bind(this);
  }

  render() {
    const tag = this.state.tag;

    return (
      <Grid fluid style={{ marginTop: 20, marginBottom: 70 }}>
        <Row className="show-grid">
          <Col xs={0} md={1}>
            {' '}
          </Col>
          <Col xs={12} md={10}>
            <Panel bsStyle="primary">
              <Panel.Heading>
                {' '}
                <strong> {this.props.panelHeaderText} </strong>{' '}
              </Panel.Heading>
              <Panel.Body>
                <FormGroup controlId="formControlTagLabel">
                  <ControlLabel>
                    Label <Mandatory />
                  </ControlLabel>
                  <FormControl
                    componentClass="input"
                    type="text"
                    placeholder="Tag name"
                    value={tag.name}
                    onChange={(e) => this.onInputChange('name', e)}
                  />
                </FormGroup>

                <FormGroup controlId="formControlTagDescription">
                  <ControlLabel>Description </ControlLabel>
                  <FormControl
                    componentClass="input"
                    type="text"
                    placeholder="Tag description"
                    value={tag.description}
                    onChange={(e) => this.onInputChange('description', e)}
                  />
                </FormGroup>

                <FormGroup controlId="formControlTagScope">
                  <ControlLabel>
                    Scope <Mandatory />{' '}
                  </ControlLabel>
                  <FormControl
                    componentClass="select"
                    type="text"
                    placeholder="Tag scope"
                    value={tag.description}
                    onChange={(e) => this.onInputChange('scope', e)}
                  >
                    <option value={this.props.investigationId}>
                      investigation
                    </option>
                    {/* <option value='beamline'>beamline</option> */}
                  </FormControl>
                </FormGroup>

                <FormGroup controlId="formControlTagColor">
                  <ControlLabel> Color </ControlLabel>
                  <Row>
                    <Col xs={12}>
                      <OverlayTrigger
                        trigger="click"
                        placement="top"
                        rootClose
                        overlay={renderPopoverColorPickerBottom(
                          this.onChangeComplete
                        )}
                      >
                        <div
                          style={{
                            backgroundColor:
                              tag.color || UI.logbook.DEFAULT_TAG_COLOR,
                            width: 30,
                            height: 30,
                            marginLeft: '50%',
                            marginRight: '50%',
                          }}
                        />
                      </OverlayTrigger>
                    </Col>
                  </Row>
                </FormGroup>
                <br />

                <div style={{ float: 'right' }}>
                  <Button
                    bsStyle="primary"
                    style={{ marginRight: 10 }}
                    onClick={() => this.onSave()}
                  >
                    {' '}
                    Save{' '}
                  </Button>
                  <Button
                    bsStyle="primary"
                    style={{ marginRight: 10 }}
                    onClick={() => this.props.onCancelButtonClicked()}
                  >
                    {' '}
                    Cancel{' '}
                  </Button>
                </div>
              </Panel.Body>
            </Panel>
          </Col>
          <Col xs={0} md={1}>
            {' '}
          </Col>
        </Row>
      </Grid>
    );
  }

  /**
   * CallBack function triggered when the user changes the tag field
   */
  onInputChange(changedTagProperty, event) {
    const value = event.target.value;

    const tagCopy = this.state.tag;
    tagCopy[changedTagProperty] = value;

    this.setState({
      tag: tagCopy,
    });
  }

  /* CallBack function triggered when the user selects a new color */
  onChangeComplete(color) {
    const fakeEvent = {};
    fakeEvent.target = {};
    fakeEvent.target.value = color.hex;
    this.onInputChange('color', fakeEvent);
  }

  onSave() {
    this.props.onSaveButtonClicked(this.state.tag);
  }
}

NewOrEditTagPanel.propTypes = {
  /** investigation identifier */
  investigationId: PropTypes.string,
  /** Function triggered when the user clicks on the save button during tag creation or edition*/
  onSaveButtonClicked: PropTypes.func,
  /** Text display in the panel header */
  panelHeaderText: PropTypes.string,
  /** Function triggered when the user clicks the cancel button */
  onCancelButtonClicked: PropTypes.func,
  /* if present, it corresponds to the tag to edit. If null, it indcates that a tag is being created*/
  tag: PropTypes.object,
};

export default NewOrEditTagPanel;

class Mandatory extends React.Component {
  render() {
    return <span style={{ color: 'red' }}>*</span>;
  }
}
