/* eslint-disable no-unused-vars */
import classNames from 'classnames'
import { ReactElement, MouseEvent } from 'react'
import { BiX } from 'react-icons/bi'
import { TreeView } from 'ui'
import { DropDown } from '../../dropdown/DropDown'

/* eslint-disable import/prefer-default-export */

export interface OptionFeature {
  id: number
  title: string
  description?: string
  image_url?: string
  link?: string
  option_category_id?: number
  created_at?: string | null
  updated_at?: string | null
}

export interface CategoryData {
  id: number
  name: string
  option_features: OptionFeature[]
  created_at?: string | null
  updated_at?: string | null
}

interface TreeSelectProps {
  label?: string
  id: string
  horizontal?: boolean
  errorMessage?: string
  placeholder?: string
  data: CategoryData[]
  value: OptionFeature[]
  onChange: (value: OptionFeature[]) => void
  leftContent?: ReactElement
  rightContent?: ReactElement
  multiSelect?: boolean
}

const baseClass = 'w-full input-bordered border placeholder-placeholderColor rounded-lg flex items-center min-h-9'

export const TreeSelect = (props: TreeSelectProps) => {
  const {
    label,
    id,
    horizontal,
    placeholder,
    data,
    value,
    errorMessage,
    onChange,
    leftContent,
    rightContent,
    multiSelect = true,
  } = props

  const handleSelectionChange = (selectedFeatures: OptionFeature[]) => {
    onChange(selectedFeatures)
  }

  const handleRemove = (featureId: number, e: MouseEvent) => {
    e.stopPropagation()
    const newValues = value.filter((f) => f.id !== featureId)
    onChange(newValues)
  }

  return (
    <div className={classNames('flex gap-2 w-full', horizontal ? 'justify-between' : 'flex-col')}>
      <div className={horizontal ? 'w-[30%] mt-2' : ''}>
        {label && (
          <label htmlFor={id} className="text-sm px-1 text-secondary capitalize">
            {label}
          </label>
        )}
      </div>

      <div className={horizontal ? 'w-[70%]' : 'w-full'}>
        <DropDown
          placement="top"
          width="w-full"
          content={
            <TreeView
              data={data}
              selectedFeatures={value}
              onSelectionChange={handleSelectionChange}
              multiSelect={multiSelect}
            />
          }
          trigger={
            <div>
              <div
                className={classNames(
                  baseClass,
                  'cursor-pointer flex-wrap',
                  errorMessage && 'input-error',
                  value.length > 0 ? 'py-2 px-2' : 'py-2 px-3',
                )}
              >
                {leftContent && <span className="pl-2">{leftContent}</span>}

                <div className="flex flex-wrap gap-1 flex-1 items-center min-h-[1.5rem]">
                  {value.length > 0 ? (
                    <>
                      {value.map((feature) => (
                        <span
                          key={feature.id}
                          className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 rounded-md text-sm font-medium"
                        >
                          {feature.title}
                          <button
                            type="button"
                            onClick={(e) => handleRemove(feature.id, e)}
                            className="hover:bg-blue-200 rounded-full p-0.5 transition-colors ml-1"
                            aria-label={`Remove ${feature.title}`}
                          >
                            <BiX size={14} />
                          </button>
                        </span>
                      ))}
                    </>
                  ) : (
                    <span className="text-gray-500 text-sm">{placeholder || 'Select options'}</span>
                  )}
                </div>

                {rightContent && <span>{rightContent}</span>}
              </div>

              {errorMessage && (
                <label htmlFor={id} className="text-red-500 text-sm">
                  {errorMessage}
                </label>
              )}
            </div>
          }
          onHover={false}
        />
      </div>
    </div>
  )
}