import type { FC } from 'react'
import type { Category } from '../types'
import type { PlanRange } from './plan-range-switcher'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Divider from '@/app/components/base/divider'
import { Cloud, SelfHosted } from '../assets'
import PlanRangeSwitcher from './plan-range-switcher'
import Tab from './tab'

type PlanSwitcherProps = {
  currentCategory: Category
  currentPlanRange: PlanRange
  onChangeCategory: (category: Category) => void
  onChangePlanRange: (value: PlanRange) => void
}

const PlanSwitcher: FC<PlanSwitcherProps> = ({
  currentCategory,
  currentPlanRange,
  onChangeCategory,
  onChangePlanRange,
}) => {
  const { t } = useTranslation()
  const isCloud = currentCategory === 'cloud'

  const tabs = {
    cloud: {
      value: 'cloud' as Category,
      label: t('plansCommon.cloud', { ns: 'billing' }),
      Icon: Cloud,
    },
    self: {
      value: 'self' as Category,
      label: t('plansCommon.self', { ns: 'billing' }),
      Icon: SelfHosted,
    },
  }

  return (
    <div className="flex w-full justify-center border-t border-divider-accent px-10">
      <div className="flex max-w-[1680px] grow items-center justify-between border-x border-divider-accent p-1">
        <div className="flex items-center">
          <Tab<Category>
            {...tabs.cloud}
            isActive={currentCategory === tabs.cloud.value}
            onClick={onChangeCategory}
          />
          <Divider type="vertical" className="mx-2 h-4 bg-divider-accent" />
          <Tab<Category>
            {...tabs.self}
            isActive={currentCategory === tabs.self.value}
            onClick={onChangeCategory}
          />
        </div>
        {isCloud && (
          <PlanRangeSwitcher
            value={currentPlanRange}
            onChange={onChangePlanRange}
          />
        )}
      </div>
    </div>
  )
}

export default React.memo(PlanSwitcher)