import PropTypes from "prop-types";
import React, { Component } from "react";
import { Button } from "@sc/components/ui";
import { Close, Spacer } from "../AllButtons";

const buttonStyle = { color: "#999", display: "inline-block" };
const inputStyle = {
  backgroundColor: "transparent",
  width: "100%",
  border: "none",
  outline: "none",
  margin: 10,
  color: "#666",
  fontSize: 11,
  padding: 2,
  position: "absolute",
};

class ButtonLinkGroup extends Component {
  constructor(props) {
    super(props);

    this.state = {
      url: props.settings.href || props.defaultURL,
      linkSelectorExpanded: props.linkSelectorExpanded,
    };

    this.doSave = false;

    this.handleChange = this.handleChange.bind(this);
    this.doChange = this.doChange.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.toggleLinkExpansion = this.toggleLinkExpansion.bind(this);
  }

  handleChange(e) {
    this.setState({ url: e.target.value });
  }

  doChange(url) {
    this.setState({ url });
    this.props.onChange(url);
  }

  handleKeyUp(e) {
    window.clearTimeout(this.doSave);
    const v = e.target.value;
    this.doSave = window.setTimeout(() => {
      this.doChange(v);
    }, 1000);

    if (e.keyCode === 46 || e.keyCode === 8) return false;
  }

  toggleLinkExpansion() {
    console.log(this.state.linkSelectorExpanded);
    this.setState((prevState) => ({
      linkSelectorExpanded: !prevState.linkSelectorExpanded,
    }));
  }

  render() {
    const {
      linkSelector,
      linkCrosshair,
      showCloseButton,
      linkPlaceholder,
      linkGroups,
    } = this.props;
    const { linkSelectorExpanded } = this.state;

    return (
      <div>
        <div
          style={{
            minWidth: 260,
            border: "1px solid #999",
            borderRadius: 3,
            height: 40,
          }}
        >
          <div style={{ display: "inline-block", float: "right" }}>
            {linkSelector ? (
              <Button
                icon
                style={buttonStyle}
                className="btn-control"
                onClick={this.toggleLinkExpansion}
              >
                more_horiz
              </Button>
            ) : null}
            {linkCrosshair ? (
              <Button
                icon
                style={{ ...buttonStyle, cursor: "crosshair" }}
                className="btn-control"
              >
                gps_fixed
              </Button>
            ) : null}
            {showCloseButton ? (
              <span>
                <Spacer />
                <Close />
              </span>
            ) : null}
          </div>
          <input
            placeholder={linkPlaceholder}
            style={{ ...inputStyle }}
            value={this.state.url}
            ref={(el) => (this.input = el)}
            onMouseDown={() => this.input.select()}
            onChange={this.handleChange}
            onKeyUp={this.handleKeyUp}
            onFocus={() => this.props.setIsEditing(true)}
            onBlur={() => {
              this.props.setIsEditing(false);
            }}
          />
          <div style={{ clear: "both" }} />
        </div>
        {linkSelectorExpanded ? (
          <div>
            {linkGroups.map((group, key) => (
              <div
                key={key}
                style={{
                  width: 300,
                  padding: "10px 30px",
                  backgroundColor: "transparent",
                  marginTop: 5,
                }}
              >
                <div>{group.group}</div>
                {/* <Carousel dots={false} infinite={false} slidesToShow="3">
                  {group.links.map((link, key) => (
                    <ImageLink
                      key={key}
                      text={link.text}
                      onSelect={() => {
                        this.doChange(link.url);
                      }}
                    />
                  ))}
                </Carousel> */}
              </div>
            ))}
          </div>
        ) : null}
      </div>
    );
  }
}

ButtonLinkGroup.propTypes = {
  /** The Placeholder text to display in the URL input box */
  linkPlaceholder: PropTypes.string,
  /** Boolean if the linkSelector dropdown is available * */
  linkSelector: PropTypes.bool,
  /** Boolean if the linkSelector dropdown has been activated and is expanded */
  linkSelectorExpanded: PropTypes.bool,
  /** Boolean if the linkCrosshair icon (to drag/point to other pages, or page sections) is showing * */
  linkCrosshair: PropTypes.bool,
  /** Boolean if the close [x] button should be shown */
  showCloseButton: PropTypes.bool,
  onChange: PropTypes.func,
  defaultURL: PropTypes.string,
  linkGroups: PropTypes.arrayOf(PropTypes.object),
};
ButtonLinkGroup.defaultProps = {
  linkPlaceholder: "Paste or type in a URL",
  linkSelector: true,
  linkSelectorExpanded: false,
  linkCrosshair: true,
  linkGroups: [
    {
      group: "This Campaign",
      links: [
        {
          url: "http://google.com",
          image: "http://via.placeholder.com/100x100/444/222/&text=First+Link",
          text: "First Link",
        },
        {
          url: "http://google.com/2",
          image: "http://via.placeholder.com/100x100/444/222/&text=Second+Link",
          text: "Second Link",
        },
        {
          url: "http://google.com/3",
          image: "http://via.placeholder.com/100x100/444/222/&text=Third+Link",
          text: "Third Link",
        },
        {
          url: "http://google.com/3",
          image: "http://via.placeholder.com/100x100/444/222/&text=Fourth+Link",
          text: "Fourth Link",
        },
      ],
    },
    {
      group: "All Pages",
      links: [
        {
          url: "http://google.com",
          image: "http://via.placeholder.com/100x100/444/222/&text=First+Link",
          text: "First Link",
        },
        {
          url: "http://google.com/2",
          image: "http://via.placeholder.com/100x100/444/222/&text=Second+Link",
          text: "Second Link",
        },
        {
          url: "http://google.com/3",
          image: "http://via.placeholder.com/100x100/444/222/&text=Third+Link",
          text: "Third Link",
        },
      ],
    },
  ],
  showCloseButton: true,
  defaultURL: "",
};

export default ButtonLinkGroup;