import * as React from "react";
import { Callout } from "office-ui-fabric-react/lib/components/Callout";
import { Icon, PrimaryButton, TextField } from "office-ui-fabric-react";
import {
  getTheme,
  FontWeights,
  mergeStyleSets
} from "office-ui-fabric-react/lib/Styling";
import "./UploaderCallout.css";
import { FormattedMessage } from "react-intl";

const theme = getTheme();
const styles = mergeStyleSets({
  buttonArea: {
    verticalAlign: "top",
    display: "inline-block",
    textAlign: "center"
  },
  callout: {
    maxWidth: 300
  },
  header: {
    padding: "18px 24px 12px"
  },
  title: [
    theme.fonts.xLarge,
    {
      margin: 0,
      color: theme.palette.neutralPrimary,
      fontWeight: FontWeights.semilight
    }
  ],
  inner: {
    height: "100%",
    padding: "0 24px 20px"
  },
  actions: {
    position: "relative",
    marginTop: 20,
    width: "100%",
    whiteSpace: "nowrap"
  },
  link: [
    theme.fonts.medium,
    {
      color: theme.palette.neutralPrimary
    }
  ]
});

class UploaderCallout extends React.Component<any, any> {
  private _menuButtonElement = React.createRef<HTMLDivElement>();
  constructor(props: any) {
    super(props);
    this.state = {
      isCalloutVisible: false,
      description: this.props.desc
    };
  }

  private openDescription(uploader: any) {
    this.setState({ isCalloutVisible: true });
  }
  private _onCalloutDismiss = (): void => {
    this.setState({
      isCalloutVisible: false
    });
  };
  private _handleDataChange(value: any) {
    this.setState({ description: value });
  }

  private addDescription() {
    this.setState({ isCalloutVisible: false });
    // this.props.description  = this;
  }
  render() {
    return (
      <div>
        <div className={styles.buttonArea} ref={this._menuButtonElement}>
          <button
            type="button"
            onClick={this.openDescription.bind(this, this.props.uploader)}
            className="btn-description-toggle"
          >
            <Icon className="fileIcon round" iconName="Edit" />
          </button>

          {/* <DefaultButton onClick={this._onShowMenuClicked} text={isCalloutVisible ? 'Hide callout' : 'Show callout'} /> */}
        </div>
        <Callout
          className="uploader-callout"
          role="alertdialog"
          gapSpace={0}
          target={this._menuButtonElement.current}
          onDismiss={this._onCalloutDismiss}
          setInitialFocus={true}
          hidden={!this.state.isCalloutVisible}
        >
          <div className="uploader-callout-header">
            <p className="uploader-callout-title" >
              <FormattedMessage id="AddDescriptionForFile"/>
            </p>
          </div>
          <div className="uploader-callout-inner">
            <div className="uploader-callout-content">
              <TextField
                className=" ms-lg12"
                multiline
                rows={4}
                value={this.state.description ? this.state.description : ""}
                onChanged={this._handleDataChange.bind(this)}
              />
            </div>
            <div className="callout-actions">
              <PrimaryButton onClick={this.addDescription.bind(this)}>
                <FormattedMessage id="Add" />
              </PrimaryButton>
            </div>
          </div>
        </Callout>
      </div>
    );
  }
}

export default UploaderCallout;
