import React, { Component } from "react";
import styled from "styled-components";
import { Cell } from "@sc/components/ui";

const TheCategoryObject = styled.div`
  &:hover {
    box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.3);
    filter: brightness(95%);
  }
`;

class CategoryObject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHighlighted: false
    };

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

  toggleHighlight() {
    this.setState(prevState => ({
      isHighlighted: !prevState.isHighlighted
    }));
  }

  render() {
    const {
      label,
      image,
      color,
      description,
      animated,
      searchStr
    } = this.props;
    const { isHighlighted } = this.state;

    const cellBG = {
      position: "absolute",
      width: 280,
      height: 120
    };
    const textStyle = {
      fontWeight: "bold",
      textAlign: "center",
      textTransform: "uppercase",
      color: "#333",
      textShadow: "1px 1px rgba(255,255,255,0.5)",
      fontSize: "16pt"
    };

    if (
      searchStr === "leads" ||
      searchStr === "sales" ||
      searchStr === "event" ||
      searchStr === "recover" ||
      searchStr === "fulfilment"
    ) {
      return (
        <TheCategoryObject>
          <Cell
            style={{
              backgroundImage:
                "url(https://img.freepik.com/free-vector/abstract-geometric-pattern-background_1319-242.jpg?size=338c&ext=jpg)",
              width: 140
            }}
          >
            <div
              style={{
                backgroundColor: color,
                padding: 10,
                opacity: 0.9,
                ...textStyle,
                fontSize: "10pt",
                height: 50,
                display: "flex",
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              {label}
            </div>
          </Cell>
        </TheCategoryObject>
      );
    }

    return (
      <TheCategoryObject
        {...this.props}
        style={{
          background: `linear-gradient(180deg, ${color} 0%, rgba(0,0,0,1) 200%)`,
          backgroundImage:
            "url(https://img.freepik.com/free-vector/abstract-geometric-pattern-background_1319-242.jpg?size=338c&ext=jpg)",
          width: 280,
          height: 120,
          margin: "15px 0"
        }}
        onMouseEnter={this.toggleHighlight}
        onMouseLeave={this.toggleHighlight}
      >
        <Cell>
          <div
            style={{
              ...cellBG,
              backgroundColor: color,
              opacity: 0.9
            }}
          />
          <div
            style={{
              ...cellBG,
              padding: 20,
              display: "flex",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <span style={textStyle}>{label}</span>
          </div>
          {image}
          {isHighlighted ? (
            <div>
              <div
                style={{
                  ...cellBG,
                  height: 55,
                  background:
                    "linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%)",
                  marginTop: 65,
                  opacity: 0.5
                }}
              />
              <div
                style={{
                  ...cellBG,
                  height: 40,
                  marginTop: 80,
                  padding: 6,
                  color: "white"
                }}
              >
                {description}
              </div>
            </div>
          ) : null}
        </Cell>
      </TheCategoryObject>
    );
  }
}

export default CategoryObject;