import React, { Component } from "react";
import {
  ButtonSliderGroup,
  ColorPicker,
  FancySelector,
  Icon,
  Section,
} from "..";
import style from "../style";

class BordersShadow extends Component {
  constructor(props) {
    super(props);
    this.selectPreset = this.selectPreset.bind(this);
    this.changeBorderThickness = this.changeBorderThickness.bind(this);
    this.changeBorderRadius = this.changeBorderRadius.bind(this);
    this.changeBorderColor = this.changeBorderColor.bind(this);
    this.changeBlurRadius = this.changeBlurRadius.bind(this);
  }

  selectPreset(id) {
    const { updateComponentStyle, settings } = this.props;

    if (id !== "shadow") {
      const borderStyle = id;
      const borderWidth = settings.properties.borderWidth || 1;
      console.log(id);
      if (id === "none") {
        const boxShadow = "0 0 0";
        updateComponentStyle(
          settings.id,
          {
            borderWidth,
            borderStyle,
            boxShadow,
          },
          true,
          false
        );
      } else {
        updateComponentStyle(
          settings.id,
          { borderWidth, borderStyle },
          true,
          false
        );
      }
    }
  }

  changeBorderThickness(value) {
    const { updateComponentStyle, settings } = this.props;

    const bW = settings.properties.borderWidth || 0;
    const bWOffset = value === "LESS" ? bW - 1 : bW + 1;
    const borderWidth = Number.isInteger(value) ? value : bWOffset;

    // set border style if none
    const borderStyle = !settings.properties.hasOwnProperty("borderStyle")
      ? "solid"
      : settings.properties.borderStyle;

    updateComponentStyle(
      settings.id,
      { borderWidth, borderStyle },
      true,
      false
    );
  }

  changeBorderRadius(value) {
    const { updateComponentStyle, settings } = this.props;

    const bR = settings.properties.borderRadius || 0;
    const bROffset = value === "LESS" ? bR - 2 : bR + 2;
    const borderRadius = Number.isInteger(value) ? value : bROffset;

    updateComponentStyle(settings.id, { borderRadius }, true, false);
  }

  changeBorderColor(color) {
    const { updateComponentStyle, settings } = this.props;

    updateComponentStyle(
      settings.id,
      {
        borderColor: color.hex,
        // shadowColor: color.hex,
      },
      true,
      false
    );
  }

  changeBlurRadius(value) {
    const { updateComponentStyle, settings } = this.props;

    const sR = settings.properties.shadowRadius || 0;
    const sROffset = value === "LESS" ? sR - 2 : sR + 2;

    const shadowColor = settings.properties.borderColor || "#000";
    const shadowOffset = settings.properties.shadowOffset || 0;
    const shadowRadius = Number.isInteger(value) ? value : sROffset;

    const boxShadow = `${shadowOffset}px ${shadowOffset}px ${shadowRadius}px ${shadowColor}`;

    updateComponentStyle(
      settings.id,
      {
        shadowColor,
        shadowOffset,
        shadowRadius,
        boxShadow,
      },
      true,
      false
    );
  }

  render() {
    const { settings } = this.props;

    const borderStyle = !settings.properties.hasOwnProperty("borderStyle")
      ? "none"
      : settings.properties.borderStyle;

    const borderItems = [
      {
        id: "none",
        component: (props) => (
          <Icon
            {...props}
            icon="do_not_disturb"
            highlighted={borderStyle === "none"}
            caption="none"
          />
        ),
      },
      {
        id: "solid",
        component: (props) => (
          <Icon
            {...props}
            icon="border_outer"
            highlighted={borderStyle === "solid"}
            caption="solid"
          />
        ),
      },
      {
        id: "dashed",
        component: (props) => (
          <Icon
            {...props}
            icon="border_clear"
            highlighted={borderStyle === "dashed"}
            caption="dashed"
          />
        ),
      },
    ];

    return (
      <Section label="Borders & Shadow" icon="rounded_corners" {...this.props}>
        <fieldset style={style.fieldset}>
          <legend>Style</legend>
          <FancySelector items={borderItems} onChange={this.selectPreset} />
        </fieldset>
        <ColorPicker
          {...this.props}
          text="Color"
          colorExpanded={false}
          showAlpha
          color={settings.properties.borderColor}
          onChange={this.changeBorderColor}
        />
        <ButtonSliderGroup
          onChange={this.changeBorderThickness}
          text="Thickness"
          button1={{ icon: "remove", value: "LESS" }}
          button2={{ icon: "add", value: "MORE" }}
          minValue={0}
          maxValue={100}
          value={settings.properties.borderWidth || 0}
        />
        {!this.props.hideBorderRadius ? (
          <ButtonSliderGroup
            onChange={this.changeBorderRadius}
            text="Round"
            button1={{ icon: "remove", value: "LESS" }}
            button2={{ icon: "add", value: "MORE" }}
            minValue={0}
            maxValue={100}
            value={settings.properties.borderRadius || 0}
          />
        ) : null}
        {!this.props.hideShadow ? (
          <ButtonSliderGroup
            onChange={this.changeBlurRadius}
            text="Shadow"
            button1={{ icon: "remove", value: "LESS" }}
            button2={{ icon: "add", value: "MORE" }}
            minValue={0}
            maxValue={100}
            value={settings.properties.shadowRadius || 0}
          />
        ) : null}
      </Section>
    );
  }
}

BordersShadow.propTypes = {};

BordersShadow.defaultProps = {
  isExpanded: false,
  hideBorderRadius: false,
  hideShadow: false,
};

export default BordersShadow;