import Accordion, { MultiAccordion } from '@/Components/Tabs/Accordion'
import Tabs from '@/Components/Tabs/Tabs'
import RadioGroup from '@/Components/Inputs/RadixRadioGroup'
import React, { useState, type ReactElement } from 'react'
import Button from '@/Components/Buttons/Button'
import { type ITab } from '@/Components/Tabs/Types'
import { Checkbox } from '@/Components'


export const TabWithAfterAndBeforeNavElements = (): ReactElement => {
  const [enableThird, setEnableThird] = useState<boolean>(false)
  const tabs = [
    {
      id: 'first',
      label: 'First',
      content: 'First Content'
    },
    {
      id: 'second',
      label: 'Second',
      content: 'Second Content'
    },
    {
      id: 'third',
      label: `Third (${enableThird ? 'enabled' : 'disabled'})`,
      content: 'Third Content',
      disabled: !enableThird
    }
  ]
  return (
    <div className='bg-slate-100 p-20 flex flex-col gap-4'>
      <Checkbox
        id='enable_third'
        testId='enable_third'
        label='Enable third tab'
        value={enableThird}
        onChange={(e) => {
          setEnableThird(e)
        }}
      />
      <Tabs
        className='bg-white shadow-lg p-4 inline-block min-h-60'
        tabNavClassName='border-none'
        activeTabNavClassName='border-none'
        navClassName='border-b border inline-block'
        tabs={tabs}
        beforeTabNavElements={<Button size='xs' className='mr-4'>Test before</Button>}
        afterTabNavElements={<Button size='xs' className='ml-4'>Test after</Button>}
      />
    </div>
  )
}


const MultiAccordionDemo = ({ tabs }: { tabs: ITab[] }): ReactElement => {
  const [selectAll, setSelectAll] = useState<boolean>(true)

  return (
    <div>
      <Button size='sm' className='mb-4' onClick={() => {
        setSelectAll(!selectAll)
      }}>{selectAll ? 'Collapse' : 'Select'} all</Button>
      <MultiAccordion tabs={tabs} selectAll={selectAll} className='w-[400px] bg-slate-100' />
    </div>
  )
}

const defaultSome = ['first', 'third']
const SomeAccordionDemo = ({ tabs }: { tabs: ITab[] }): ReactElement => {
  const [selectedTabs, setSelectedTabs] = useState<string[] | undefined>(defaultSome.slice())
  return <div>
    <Button size='sm' className='mb-4' onClick={() => {
      setSelectedTabs(selectedTabs === undefined ? defaultSome.slice() : undefined)
    }}>{
        selectedTabs === undefined ? 'Expand some' : 'Collapse all'
      }</Button>
    <MultiAccordion selectedTabs={selectedTabs} onChange={(e) => {
      setSelectedTabs(e)
    }} selectAll={false} tabs={tabs} className='w-[400px] bg-slate-100' />
  </div>
}

export default function TabDemo(): ReactElement {
  const tabs = [
    {
      id: 'first',
      label: 'First',
      content: 'First Content'
    },
    {
      id: 'second',
      label: 'Second',
      content: 'Second Content'
    },
    {
      id: 'third',
      label: 'Third',
      content: 'Third Content'
    }
  ]
  const [type, setType] = useState<string | undefined>('accordion')

  return (
    <div className='flex flex-col gap-8 m-8'>
      <RadioGroup
        id='type'
        testId='type'
        options={[
          {
            value: 'tab',
            label: 'Tab'
          },
          {
            value: 'accordion',
            label: 'Accordion'
          },
          {
            value: 'multi_accordion',
            label: 'Multi-Accordion'
          },
          {
            value: 'some_accordion',
            label: 'Some Accordion'
          }
        ]}
        value={type}
        onChange={(v) => { setType(v?.value !== undefined ? String(v.value) : undefined) }}
      />
      <p>{type}</p>
      {
        type === 'tab'
          ? <Tabs tabs={tabs} />
          : type === 'accordion'
            ? <Accordion tabs={tabs} className='w-[400px] bg-slate-100' />
            : type === 'multi_accordion'
              ? <MultiAccordionDemo tabs={tabs} />
              : <SomeAccordionDemo tabs={tabs} />

      }

    </div>
  )
}
