import { useCallback, useEffect, useRef, useState } from 'react'

import { type GenericNode } from '../Form/NestedCheckboxHelper'

// Dummy data
const names = [
  'Emma Thompson',
  'Liam Johnson',
  'Olivia Davis',
  'Noah Wilson',
  'Ava Brown',
  'Ethan Taylor',
  'Sophia Anderson',
  'Mason Martinez',
  'Isabella Thomas',
  'William Garcia',
  'Mia Robinson',
  'James Lee',
  'Charlotte Walker',
  'Benjamin Hall',
  'Amelia Allen',
  'Lucas Young',
  'Harper King',
  'Alexander Wright',
  'Evelyn Scott',
  'Michael Green',
  'Abigail Baker',
  'Daniel Nelson',
  'Emily White',
  'Henry Adams',
  'Elizabeth Hill',
  'Joseph Rivera',
  'Avery Mitchell',
  'Samuel Carter',
  'Sofia Perez',
  'David Roberts',
  'Scarlett Turner',
  'Jackson Phillips',
  'Grace Campbell',
  'Sebastian Parker',
  'Chloe Evans',
  'Christopher Edwards',
  'Zoey Collins',
  'Andrew Stewart',
  'Penelope Sanchez',
  'Matthew Morris',
  'Lily Rogers',
  'Aiden Reed',
  'Layla Cook',
  'Leo Bailey',
  'Madelyn Bell',
  'Jack Murphy',
  'Nora Cooper',
  'Luke Richardson',
  'Aubrey Cox',
  'Gabriel Howard',
  'Hannah Ward',
  'Carter Torres',
  'Aria Peterson',
  'Ryan Gray',
  'Zoe Ramirez',
  'Nicholas James',
  'Brooklyn Watson',
  'Dylan Brooks',
  'Leah Kelly',
  'Wyatt Sanders',
  'Audrey Price',
  'Owen Bennett',
  'Claire Barnes',
  'Ezra Ross',
  'Savannah Henderson',
  'John Coleman',
  'Aaliyah Jenkins',
  'Isaac Perry',
  'Camila Powell',
  'Lincoln Hughes',
  'Skylar Butler',
  'Jonathan Foster',
  'Bella Simmons',
  'Eli Russell',
  'Maya Diaz',
  'Connor Patterson',
  'Lucy Long',
  'Jeremiah Flores',
  'Gianna Bryant',
  'Cameron Alexander',
  'Violet Griffin',
  'Landon Harrison',
  'Stella Freeman',
  'Adrian Wells',
  'Hazel Washington',
  'Colton Jordan',
  'Liliana Gonzales',
  'Tyler Gordon',
  'Addison Chapman',
  'Carson Carpenter',
  'Natalie Silva',
  'Dominic West',
  'Aurora Hicks',
  'Ian Snyder',
]

type ResType = {
  name: string
  secondaryOption?: string
  disabled?: boolean
}[]

type APIResType = {
  title: string
  secondary?: string
  disabled?: boolean
}[]
export const generateArray = (
  count: number,
  secondaryText?: boolean,
  disabled?: boolean,
) => {
  const stringArray: ResType = []
  const disabledIndices = [1, 3, 5, 7, 9]
  const secondaryTextIndices = [2, 4, 6, 8, 10]

  for (let i = 0; i < count; i++) {
    stringArray.push({
      name: names[i],
      disabled: disabled ? disabledIndices.includes(i) : undefined,
      secondaryOption:
        secondaryText && secondaryTextIndices.includes(i)
          ? 'Secondary Text'
          : undefined,
    })
  }
  return stringArray
}

export const useApiMultiSelectStory = (search?: string) => {
  const [apiData, setApiData] = useState<APIResType>([])
  const [searchedData, setSearchedData] = useState<APIResType>([])
  const [selectedData, setSelectedData] = useState<APIResType>([])
  const [start, setStart] = useState(0)

  const fetchNew = () => setStart(apiData.length)

  const apiRef = useRef(apiData)

  useEffect(() => {
    apiData.length &&
      setSearchedData(
        apiData.filter((item) => item.title.includes(search ?? '')),
      )
  }, [apiData, search])

  useEffect(() => {
    apiRef.current = apiData
  }, [apiData])

  const getData = useCallback((start: number) => {
    const prevData = apiRef.current
    fetch(
      `https://jsonplaceholder.typicode.com/posts?_start=${start}&_limit=10`,
    )
      .then((res) => res.json())
      .then((data) => {
        setApiData([...prevData, ...data])
      })
  }, [])

  useEffect(() => {
    getData(start)
  }, [getData, start])

  return {
    apiData: search?.length ? searchedData : apiData,
    selectedData,
    fetchNew,
    setSelectedData,
  }
}

export const multiSelectOptions = generateArray(100)

export const multiSelectDisabledList = generateArray(100, false, true)

export const genericPropsMultiSelect = {
  formLabelProps: { label: 'People' },
  selectedOptions: [],
  options: multiSelectOptions,
  searchProps: {
    value: '',
    placeholder: 'Search People',
  },
  emptyStateProps: {
    primaryText: 'No People Found',
    secondaryText: 'Try searching for a different name',
  },
}

export const generateDummyNestedMultiSelectData = () => {
  const nestedData = []

  for (let i = 1; i <= 4; i++) {
    const rootNode = {
      id: i * 10,
      name: `Root Category ${i}`,
      is_leaf_node: false,
      is_root_node: true,
      parent_category_id: null,
      root_category_id: 0,
      sub_category_count: 3,
      children: [],
    }

    for (let j = 1; j <= 3; j++) {
      const childNode = {
        id: i * 10 + j,
        name: `Subcategory ${j} of Root ${i}`,
        is_leaf_node: j === 3, // Last child as leaf node
        is_root_node: false,
        parent_category_id: rootNode.id,
        root_category_id: rootNode.id,
        sub_category_count: j === 3 ? 0 : 2,
        children: [],
      }

      if (!childNode.is_leaf_node) {
        for (let k = 1; k <= 2; k++) {
          if (childNode.children) {
            ;(childNode.children as GenericNode[]).push({
              id: childNode.id * 10 + k,
              name: `Leaf Node ${k} of Subcategory ${j}`,
              is_leaf_node: true,
              is_root_node: false,
              parent_category_id: childNode.id,
              root_category_id: rootNode.id,
              sub_category_count: 0,
              children: [],
            })
          }
        }
      }

      ;(rootNode.children as GenericNode[]).push(childNode)
    }

    nestedData.push(rootNode)
  }

  return nestedData
}