import ModeSwitcher from './ModeSwitcher'
import LayoutSwitcher from './LayoutSwitcher'
import ThemeSwitcher from './ThemeSwitcher'
import DirectionSwitcher from './DirectionSwitcher'
import NavModeSwitcher from './NavModeSwitcher'
import CopyButton from './CopyButton'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useStoreState } from '@/store'
import StyleSwitcher from './StyleSwitcher'

export type ThemeConfiguratorProps = {
  callBackClose?: () => void
}

const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
  const { translate } = useLocalization()

  const navMode = useStoreState((state) => state.theme.navMode)

  return (
    <div className="flex flex-col h-full justify-between">
      <div className="flex flex-col gap-y-5 mb-6">
        <div className="flex items-center justify-between">
          <div>
            <h6>{translate('::SidePanel.Mode')}</h6>
            <span>{translate('::SidePanel.Mode.Description')}</span>
          </div>
          <ModeSwitcher />
        </div>
        <div className="flex items-center justify-between">
          <div>
            <h6>{translate('::SidePanel.Direction')}</h6>
            <span>{translate('::SidePanel.Direction.Description')}</span>
          </div>
          <DirectionSwitcher callBackClose={callBackClose} />
        </div>
        <div>
          <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
          <StyleSwitcher />
        </div>
        <div>
          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
          <LayoutSwitcher />
        </div>
        <div>
          <h6 className="mb-3">{translate('::SidePanel.NavMode')}</h6>
          <NavModeSwitcher />
        </div>
        <div>
          <h6 className="mb-3">{translate('::SidePanel.Themed')}</h6>
          <ThemeSwitcher />
        </div>
      </div>
      <CopyButton />
    </div>
  )
}

export default ThemeConfigurator