// X's core choices that are no plugin's: the logo and the wording (Appearance) and "one navigation
// in split view" (Settings). They are flags of the feature table (src/areas/table.ts, `area: null`),
// stored and applied like every other flag; the framework's cards and Fixes list leave them out
// (`X_ELSEWHERE`) because they have these controls.
import { Row, Section, Segmented, Toggle } from '../../../../waybetter/packages/shell/src/panel/controls.tsx';
import { useFlags } from '../../../../waybetter/packages/shell/src/panel/PluginFeatures.tsx';
import type { SectionProps } from '../../../../waybetter/packages/shell/src/panel/site.ts';
import { X_TABLE } from '../areas/table';
import { syncWording } from '../shell/stringPacks';
import { useT } from '../i18n/index.ts';

const LOGO = { brush: { logoBrush: true, replaceLogo: false }, bird: { logoBrush: false, replaceLogo: true }, x: { logoBrush: false, replaceLogo: false } } as const;

/** Appearance: the logo in X's header and tab icon, and Twitter's or X's wording. */
export function Branding({ notify }: SectionProps) {
  const t = useT();
  const [flags, choose] = useFlags(X_TABLE, notify);
  if (!flags) return null;
  const logo = flags.logoBrush ? 'brush' : flags.replaceLogo ? 'bird' : 'x';
  return <Section title={t('features.group.branding')} hint={t('tweaks.branding.hint')} id="branding">
    <Row label={t('tweaks.logo.label')} hint={t('tweaks.logo.hint')} keywords="bird brush icon favicon">
      <Segmented label={t('tweaks.logo.label')} value={logo} onChange={value => void choose(LOGO[value])}
        options={[{ value: 'brush', label: 'wayBetter for X' }, { value: 'bird', label: t('tweaks.logo.bird') }, { value: 'x', label: 'X' }]}/>
    </Row>
    <Row label={t('tweaks.wording.label')} hint={t('tweaks.wording.hint')} keywords="tweet retweet post repost">
      <Segmented label={t('tweaks.wording.label')} value={flags.twitterWording ? 'twitter' : 'x'} onChange={value => void choose({ twitterWording: value === 'twitter' }).then(saved => saved && syncWording())}
        options={[{ value: 'twitter', label: 'Twitter' }, { value: 'x', label: 'X' }]}/>
    </Row>
  </Section>;
}

/** Settings: split panes of one account share one navigation rail. */
export function LayoutSettings({ notify }: SectionProps) {
  const t = useT();
  const [flags, choose] = useFlags(X_TABLE, notify);
  if (!flags) return null;
  return <Section title={t('features.group.layout')} id="layout">
    <Row label={t('features.singleSplitNav.label')} hint={t('features.singleSplitNav.description')} keywords="singleSplitNav split pane rail navigation">
      <Toggle label={t('features.singleSplitNav.label')} checked={!!flags.singleSplitNav} onChange={next => void choose({ singleSplitNav: next })}/>
    </Row>
  </Section>;
}