import React from "react"
import PropTypes from "prop-types"
import CKIcon from "../ck-icon"
import Tooltip from "../tooltip"
import cx from "classnames"

const MAX_COLOR_ARRAY_LENGTH = 5
const isColorsArray = (props, propName, componentName) => {
  const colorsArray = props[propName]
  if (!Array.isArray(colorsArray)) {
    return new Error(
      `Invalid prop ${propName} passed to ${componentName}. Expected an array.`
    )
  }

  if (colorsArray.length > MAX_COLOR_ARRAY_LENGTH) {
    return new Error(
      `Invalid prop ${propName} passed to ${componentName}. Expected an array with length of 5 or less.`
    )
  }
}

export const SavedColorShape = {
  colors: isColorsArray,
  handleColorSelect: PropTypes.func,
  handleColorsEdit: PropTypes.func.isRequired,
}

function SavedColorTile({ color, handleColorSelect }) {
  const styles = { background: color }
  const buttonClasses =
    "h-6 w-6 rounded border border-transparent hover:border-gray-200 focus:outline-blue"
  const label = `Select color ${color}`

  return (
    <button
      className={buttonClasses}
      style={styles}
      onClick={() => handleColorSelect(color)}
      aria-label={label}
    ></button>
  )
}

function SettingsTile({ colors, handleColorsEdit }) {
  const buttonClasses =
    "h-6 w-6 mr-2 grid place-content-center rounded border border-solid text-gray-700 hover:text-gray-900 focus:text-gray-900 bg-white hover:bg-gray-300 focus:outline-blue"
  const icon = colors?.length ? "settings-sliders" : "plus"

  return (
    <Tooltip label="Edit saved colors">
      <button
        aria-label="Edit saved colors"
        onClick={handleColorsEdit}
        className={buttonClasses}
      >
        <CKIcon name={icon} size="sm" />
      </button>
    </Tooltip>
  )
}

function SavedColorTiles({ colors, handleColorSelect, handleColorsEdit }) {
  const tiles = colors.map((color, index) => {
    return (
      <SavedColorTile
        color={color}
        key={index}
        tileIndex={index}
        handleColorSelect={handleColorSelect}
      />
    )
  })

  return (
    <div className="grid grid-cols-6 gap-2">
      {tiles}
      <SettingsTile colors={colors} handleColorsEdit={handleColorsEdit} />
    </div>
  )
}

function ColorsUpdaterToolbar({
  colors = [],
  handleColorSelect,
  handleColorsEdit,
  className = "",
}) {
  const title = colors?.length ? "Saved colors" : "Click + to add saved colors"
  const classes = cx("border-t w-auto", {
    "mt-4 -mx-3": !className?.length,
    [className]: className?.length,
  })

  return (
    <div className={classes}>
      <div className="pl-3 mr-3 w-auto">
        <div className="text-gray-800 text-xs font-semibold mt-3 mb-2">
          {title}
        </div>
        <SavedColorTiles
          colors={colors}
          handleColorSelect={handleColorSelect}
          handleColorsEdit={handleColorsEdit}
        />
      </div>
    </div>
  )
}

ColorsUpdaterToolbar.propTypes = {
  colors: PropTypes.array,
  handleColorSelect: PropTypes.func,
  handleColorsEdit: PropTypes.func.isRequired,
  className: PropTypes.string,
}

export default ColorsUpdaterToolbar
