/* eslint-disable no-unused-vars */
/* eslint-disable import/prefer-default-export */
import { useState } from 'react'
import { CategoryData, OptionFeature } from '../Forms'
import './tree.style.css'

export type TreeData = {
  key: string
  label: string
  id: number
  nodes: TreeData[]
}

interface TreeViewProps {
  data: CategoryData[]
  selectedFeatures: OptionFeature[]
  onSelectionChange: (selectedFeatures: OptionFeature[]) => void
  multiSelect?: boolean
}

export const TreeView = (props: TreeViewProps) => {
  const { data, selectedFeatures, onSelectionChange, multiSelect = true } = props
  const [expandedCategories, setExpandedCategories] = useState<number[]>([])

  const toggleCategory = (categoryId: number) => {
    setExpandedCategories((prev) => {
      if (prev.includes(categoryId)) {
        return prev.filter((id) => id !== categoryId)
      }
      return [...prev, categoryId]
    })
  }

  const isFeatureSelected = (featureId: number) => selectedFeatures.some((feature) => feature.id === featureId)

  const handleFeatureToggle = (feature: OptionFeature) => {
    if (multiSelect) {
      const isSelected = isFeatureSelected(feature.id)
      if (isSelected) {
        onSelectionChange(selectedFeatures.filter((f) => f.id !== feature.id))
      } else {
        onSelectionChange([...selectedFeatures, feature])
      }
    } else {
      onSelectionChange([feature])
    }
  }

  const isCategoryExpanded = (categoryId: number) => expandedCategories.includes(categoryId)

  return (
    <div className="bg-white rounded-lg w-full max-h-[400px] overflow-y-auto p-2">
      <div className="tree-select-container">
        {data.map((category) => {
          const isExpanded = isCategoryExpanded(category.id)

          return (
            <div key={category.id} className="tree-category mb-1">
              <button
                type="button"
                className="flex items-center gap-2 py-1 hover:bg-gray-50 rounded cursor-pointer"
                onClick={() => toggleCategory(category.id)}
              >
                <span className="text-gray-500 text-sm select-none" style={{ width: '12px' }}>
                  {isExpanded ? '▼' : '▶'}
                </span>
                <span className="text-sm font-medium text-gray-800">{category.name}</span>
              </button>

              {isExpanded && (
                <div className="ml-6 mt-1">
                  {category.option_features.map((feature) => {
                    const isSelected = isFeatureSelected(feature.id)

                    return (
                      <button
                        type="button"
                        key={feature.id}
                        className="flex items-center gap-2 py-2 hover:bg-gray-50 rounded cursor-pointer"
                        onClick={() => handleFeatureToggle(feature)}
                      >
                        <input
                          type="checkbox"
                          checked={isSelected}
                          onChange={() => handleFeatureToggle(feature)}
                          className="w-4 h-4 cursor-pointer"
                          onClick={(e) => e.stopPropagation()}
                        />
                        <span className="text-sm text-gray-700">{feature.title}</span>
                      </button>
                    )
                  })}
                </div>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}