import React from 'react'
import { useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next'

import { appState } from '~utils/appState'

import SegmentedControl from '~components/SegmentedControl'
import Segment from '~components/Segment'
import ToggleSwitch from '~components/ToggleSwitch'

import { GridType } from '~utils/enums'

import './index.scss'

interface Props {
  selectedTab: GridType
  onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
  onCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}

const PartySegmentedControl = (props: Props) => {
  const { t } = useTranslation('common')

  const { party, grid } = useSnapshot(appState)

  function getElement() {
    let element: number = 0
    if (party.element == 0 && grid.weapons.mainWeapon)
      element = grid.weapons.mainWeapon.element
    else element = party.element

    switch (element) {
      case 1:
        return 'wind'
        break
      case 2:
        return 'fire'
        break
      case 3:
        return 'water'
        break
      case 4:
        return 'earth'
        break
      case 5:
        return 'dark'
        break
      case 6:
        return 'light'
        break
    }
  }

  const extraToggle = (
    <div className="ExtraSwitch">
      Extra
      <ToggleSwitch
        name="ExtraSwitch"
        editable={party.editable}
        checked={party.extra}
        onChange={props.onCheckboxChange}
      />
    </div>
  )

  return (
    <div className="PartyNavigation">
      <SegmentedControl elementClass={getElement()}>
        {/* <Segment
                    groupName="grid"
                    name="class"
                    selected={props.selectedTab === GridType.Class}
                    onClick={props.onClick}
                >Class</Segment> */}

        <Segment
          groupName="grid"
          name="characters"
          selected={props.selectedTab == GridType.Character}
          onClick={props.onClick}
        >
          {t('party.segmented_control.characters')}
        </Segment>

        <Segment
          groupName="grid"
          name="weapons"
          selected={props.selectedTab == GridType.Weapon}
          onClick={props.onClick}
        >
          {t('party.segmented_control.weapons')}
        </Segment>

        <Segment
          groupName="grid"
          name="summons"
          selected={props.selectedTab == GridType.Summon}
          onClick={props.onClick}
        >
          {t('party.segmented_control.summons')}
        </Segment>
      </SegmentedControl>

      {(() => {
        if (party.editable && props.selectedTab == GridType.Weapon) {
          return extraToggle
        }
      })()}
    </div>
  )
}

export default PartySegmentedControl