import React from 'react'
import { Toggle } from 'molecules/Toggle'
import { oneStorage } from '@skava/persistence'
import { ProductFilterOptions } from './ProductFilterOptions'
import { FilterViewProps, ItemProps } from './typings'
import { DraggableStateProps } from '../typings'

function defaultRenderOption(props: object, state: DraggableStateProps) {
  const filterList = state.filterList.map((item: FilterViewProps) => {
    return (
      <ProductFilterOptions
        onDragEnd={state.onDragEnd}
        key={item.id}
        id={item.id}
        list={item}
        isFilter={true}
        value={item.id}
        isActive={state.isActive}
        onDragOver={state.onDragOver}
      />
    )
  })
  return filterList
}
const handleChange = (props: Array<ItemProps>) => {
  const selectedFilter: Array<ItemProps> = []
  selectedFilter.push(props)
  const prevSelectedFilter = oneStorage.has('SelectedFilter')
    ? oneStorage.get('SelectedFilter')
    : []
  if (prevSelectedFilter) {
    prevSelectedFilter.forEach((item: ItemProps) => {
      if (selectedFilter[0].label !== item.label) {
        selectedFilter.push(item)
      }
    })
    oneStorage.set('SelectedFilter', selectedFilter)
  } else {
    oneStorage.set('SelectedFilter', selectedFilter)
  }
}

function renderOptionsValue(value: string) {
  return (
    <Toggle
      iconType={'checkbox'}
      key={value}
      label={value}
      value={value}
      onToggle={handleChange}
    />
  )
}

export { defaultRenderOption, renderOptionsValue }