import React, { ReactNode, useEffect, useRef, useState } from "react"
import { DimensionValue, Pressable, TextStyle, View } from "react-native"
import { AppColors } from "../../app/app.colors"
import { Button } from "../button/button.component"
import { useModal } from "../modal/modal.hook"
import { StyledText } from "../styled-text/styled-text"
import { DropdownItemsModal } from "./dropdown-items-modal.component"
import { useStyles } from "./dropdown.style"

export function DropdownItems<T>({
  checkboxes = true,
  items,
  itemRender,
  checked,
  onChange,
  onSearch,
  placeholder,
  placeholderStyle,
  radio = false,
  isIcon,
  title = "",
  titleStyles,
  content,
  isShow = false,
  isRenderMultiSelectContent = false,
  btnWidth = "100%",
  multiSelectItemContent,
  searchNoResultsLabel,
  searchPlaceholder,
  testID,
  multiSelect = false,
  mode = "primary",
  iconType = true,
}: {
  checkboxes?: boolean
  items: T[]
  mode?: "primary" | "secondary"
  multiSelect?: boolean
  itemRender: (item: T, checked: boolean) => ReactNode
  multiSelectItemContent?: (item: T, checked: boolean) => ReactNode
  checked: (item: T) => boolean
  onChange: (item: T, checked: boolean) => void
  onSearch?: (items: T[], keyword: string) => T[]
  placeholder?: string | React.JSX.Element
  placeholderStyle?: TextStyle
  iconChannel?: boolean
  btnWidth?: DimensionValue
  searchNoResultsLabel?: string
  searchPlaceholder?: string
  radio?: boolean
  isRenderMultiSelectContent?: boolean
  isShow?: boolean
  isIcon?: boolean
  title?: string
  titleStyles?: TextStyle
  content?: ReactNode
  testID?: string
  iconType?: boolean
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------
  const styles = useStyles()
  const modal = useModal()
  const ref = useRef<View>(null) // todo SH
  const dropDownRef = useRef(true)
  const [isOpen, setOpen] = useState(isShow)
  const selectedItems = items.filter(checked)

  const handleCheckboxChange = (item: T) => {
    onChange(item, !checked(item))
    setOpen(!isOpen)
  }

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  useEffect(() => {
    if (!dropDownRef.current && selectedItems.length >= 0) {
      openModal()
    } else {
      dropDownRef.current = false
    }
  }, [isOpen])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function openModal() {
    modal.open({
      component: (
        <DropdownItemsModal
          key={items.length}
          items={items}
          itemRender={itemRender}
          title={title}
          titleStyles={titleStyles}
          content={content}
          radio={radio}
          handleCheckboxChange={handleCheckboxChange}
          onSearch={onSearch}
          checked={checked}
          checkboxes={checkboxes}
          searchNoResultsLabel={searchNoResultsLabel}
          searchPlaceholder={searchPlaceholder}
        />
      ),
      footer: "rgb",
      background: "pattern",
      scrollEnabled: true,
      keyboard: 566,
    })

    // if (selectedItems.length && radio) {
    //   modal.close()
    // }
  }

  const DropdownContent = () => {
    if (selectedItems.length === 1 && !multiSelect) {
      return (
        <Button
          testID={`${testID}.button`}
          key={Date.now()}
          containerStyle={{
            width: btnWidth,
            backgroundColor:
              mode === "secondary" ? AppColors.backgroundLight : "white",
            borderColor:
              mode === "secondary" ? AppColors.backgroundLight : "#D9DFE7",
            paddingRight: 22,
          }}
          type="drop-down-opener"
          iconType={isIcon}
          onPress={() => {
            openModal()
          }}
        >
          {selectedItems.map((item) => itemRender(item, checked(item)))}
        </Button>
      )
    } else {
      if (selectedItems.length === 0) {
        return (
          <Button
            testID={`${testID}.buttonLength-0`}
            key={Date.now()}
            containerStyle={{
              backgroundColor:
                mode === "secondary" ? AppColors.backgroundLight : "white",
              width: btnWidth,
              borderColor:
                mode === "secondary" ? AppColors.backgroundLight : "#D9DFE7",
              paddingRight: 22,
              borderWidth: 1,
            }}
            iconType={iconType}
            type="drop-down-opener"
            iconSize={16}
            onPress={() => openModal()}
          >
            <StyledText
              style={[{ color: AppColors.placeholderText }, placeholderStyle]}
            >
              {placeholder}
            </StyledText>
          </Button>
        )
      } else {
        return (
          <>
            {isRenderMultiSelectContent ? (
              <Pressable
                key={Date.now()}
                style={styles.dropdownElementSelect}
                onPress={() => openModal()}
              >
                <View style={styles.dropdownMultiSelectList}>
                  {selectedItems.map((item, index) => (
                    <>
                      {multiSelectItemContent &&
                        multiSelectItemContent(item, checked(item))}
                    </>
                  ))}
                </View>
              </Pressable>
            ) : (
              <Pressable key={Date.now()} onPress={() => openModal()}>
                <View style={styles.dropdownMultiSelect}>
                  <View style={styles.dropdownMultiSelectList}>
                    {selectedItems.map((item, index) => (
                      <View style={styles.dropdownMultiSelectItem} key={index}>
                        <StyledText style={[styles.dropdownMultiSelectText]}>
                          {isRenderMultiSelectContent && multiSelectItemContent
                            ? multiSelectItemContent(item, checked(item))
                            : itemRender(item, checked(item))}
                        </StyledText>
                      </View>
                    ))}
                  </View>
                </View>
              </Pressable>
            )}
          </>
        )
      }
    }
  }

  // ---------------------------------------------------------------------------
  return (
    <View ref={ref} style={styles.container}>
      <DropdownContent />
    </View>
  )
}
I want to add select and unselect all items. I am passing items and checked to DropdownItemsModal component. I want to make all select in DropdownItemsModal component. Now I gonna give you code of DropdownItemsModal component