import React, { useEffect, useState } from 'react'
import { Button, Icon } from '$core-components'
import { t } from '$themelocalization'
import ColorPicker from './ColorPicker'
import UEditProvider from './ueditProvider'
import { UEditBox } from '@ustore/uedit'
import EditorTooltip from './EditorTooltip'
import { UEditDropDown } from './UEditDropDown'

const lineSizes = Array.from({ length: 21 }, (_, i) => i).map(i => ({ name: `${i} pt`, value: i }))

const ShapeControlsSection = ({ ueditSelectedBoxId, isShape = false }) => {
  const [fillColor, setFillColor] = useState('#fff')
  const [lineColor, setLineColor] = useState('#fff')
  const [lineWidth, setLineWidth] = useState(lineSizes[0])

  const locks = UEditProvider.locks

  const handleFillColorChange = (color) => {
    setFillColor(color)
    UEditProvider.setShapeBackgroundColor(color)
  }
  const handleLineColorChange = (color) => {
    setLineColor(color)
    UEditProvider.setLineColor(color)
  }
  const handleLineWidthChange = (item) => {
    setLineWidth(item)
    UEditProvider.setLineWidth(item.value)
  }

  useEffect(() => {
    if ([UEditBox.eTypeText, UEditBox.eTypeGraphic, UEditBox.eTypeLine].includes(UEditProvider.uEdit.getSelection()[0].type)) {
      const shapeProps = UEditProvider.getShapeProps()
      if (shapeProps) {
        shapeProps.fillColor && setFillColor(shapeProps.fillColor)
        shapeProps.lineColor && setLineColor(shapeProps.lineColor)
        shapeProps.lineWidth   &&    handleLineWidthChange(lineSizes.find(size => size.value === shapeProps.lineWidth) || {
          name: `${shapeProps.lineWidth} pt`,
          value: shapeProps.lineWidth
        })
      }
    }
  }, [ueditSelectedBoxId])



  return <div className={`shape-controls ${isShape ? 'with-padding' : ''}`}>
    {!isShape && <div className="shape-controls-title">{t('UEdit.ShapeControlSection.Shape')}</div>}
    <div className="icon-row">
      <div className="icon-row-section">
        {!locks.BACKGROUND_COLOR_LOCKED && !isShape && <ColorPicker isShape={true} setColor={handleFillColorChange} color={fillColor}>
          <Icon name="uedit-fill.svg" width="38px" height="38px"/>
          <EditorTooltip width={120} text={`${t('UEdit.Fill')}`}/>
        </ColorPicker>}
        {!locks.STROKE_COLOR_LOCKED && <ColorPicker isShape={true} setColor={handleLineColorChange} color={lineColor}>
          <Icon name="uedit-line-color.svg" width="38px" height="38px"/>
          <EditorTooltip width={120} text={`${t('UEdit.LineColor')}`}/>
        </ColorPicker>}
      </div>
      <div className="icon-row-separator"/>
      <div className="icon-row-section">
        <Button className="icon-btn move-item" onClick={UEditProvider.bringToFront}>
          <Icon name="uedit-bring-to-front.svg" width="38px" height="38px"/>
          <EditorTooltip width={120} text={`${t('UEdit.BringToFront')}`}/>
        </Button>
        <Button className="icon-btn move-item" onClick={UEditProvider.bringForward}>
          <Icon name="uedit-bring-forward.svg" width="38px" height="38px"/>
          <EditorTooltip width={120} text={`${t('UEdit.BringForward')}`}/>
        </Button>
        <Button className="icon-btn move-item" onClick={UEditProvider.sendBackward}>
          <Icon name="uedit-take-backword.svg" width="38px" height="38px"/>
          <EditorTooltip width={120} text={`${t('UEdit.TakeBackward')}`}/>
        </Button>
        <Button className="icon-btn move-item" onClick={UEditProvider.sendToBack}>
          <Icon name="uedit-take-back.svg" width="38px" height="38px"/>
          <EditorTooltip width={120} text={`${t('UEdit.TakeBack')}`}/>
        </Button>
      </div>
    </div>
    {!locks.STROKE_WEIGHT_LOCKED && <div className="line-thickness">
      <Icon name="uedit-line-thickness.svg" width="32px" height="32px"/>
      <div className="dropdown-wrapper">
        <UEditDropDown items={lineSizes} selectedValue={lineWidth} onChange={handleLineWidthChange}/>
        <EditorTooltip width={180} text={`${t('UEdit.LineThickness')}`}/>
      </div>
    </div>}
  </div>
}

export default ShapeControlsSection
