import type { MsgKey } from '../i18n/vi';
import { useI18n } from '../i18n/I18nProvider';

// The app's nine tabs. LIGHT is the develop column and holds every knob of the
// picture — white balance, the tonal range, presence and the effects — so WB and
// FX, which used to be tabs of their own, are panels of it now. TOOLS is the one
// tab of features rather than records: the chips that write a value or take the
// pointer (AUTO, FIX, GRADIENT MASK, MONOCHROME), which used to share LIGHT's
// row with the two chips that are not knobs. The rail is a single column on
// desktop and becomes the bottom bar under 860px (see styles/app.css).
export type TabId = 'presets' | 'favorited' | 'photos' | 'light' | 'tools' | 'hsl' | 'frame' | 'save' | 'create';

// The build this bundle came from, put in by vite at build time and named by
// whoever built the image (see vite.config.ts). Empty under a dev server.
const VERSION = import.meta.env.VITE_VERSION ?? '';

export const TABS: { id: TabId; label: MsgKey; glyph: string }[] = [
  { id: 'presets', label: 'tab.presets', glyph: '◉' },
  { id: 'favorited', label: 'tab.favorited', glyph: '★' },
  { id: 'photos', label: 'tab.photos', glyph: '▤' },
  { id: 'light', label: 'tab.light', glyph: '☀' },
  // The hammer and pick: the features that work ON the photo — AUTO's reading,
  // FIX's brushes, GRADIENT MASK's shapes, the MONOCHROME switch.
  { id: 'tools', label: 'tab.tools', glyph: '⚒' },
  // The HSL mixer sits with the colour tabs: it edits one hue band at a time.
  { id: 'hsl', label: 'tab.hsl', glyph: '◍' },
  { id: 'frame', label: 'tab.frame', glyph: '▣' },
  // Keeping the look on the stage and building one from scratch are two acts,
  // so they get two tabs: SAVE RECENT files what is open, CREATE RECIPES starts
  // a recipe from its parts.
  { id: 'save', label: 'tab.save', glyph: '⤓' },
  { id: 'create', label: 'tab.create', glyph: '✎' },
];

export function ToolRail({
  tab,
  onTab,
  onDropRecipe,
  signedIn = false,
}: {
  tab: TabId;
  onTab: (tab: TabId) => void;
  // A recipe chip dragged onto FAVORITED is filed there (see App's favorite()).
  onDropRecipe?: (id: string) => void;
  // MY PHOTOS is the account's own folder, so the tab is only offered once
  // there is an account to hold one.
  signedIn?: boolean;
}) {
  const { t } = useI18n();
  const favorited = (id: TabId) => id === 'favorited';
  const tabs = signedIn ? TABS : TABS.filter((entry) => entry.id !== 'photos');
  return (
    <nav className="rail" aria-label="tool tabs">
      {tabs.map((entry) => (
        <button
          key={entry.id}
          type="button"
          aria-pressed={tab === entry.id}
          onClick={() => onTab(entry.id)}
          // The star is a drop target: recipes are dragged onto it from the
          // RECIPES strip rather than retyped.
          onDragOver={(e) => {
            if (!favorited(entry.id) || !onDropRecipe) return;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
          }}
          onDrop={(e) => {
            if (!favorited(entry.id) || !onDropRecipe) return;
            e.preventDefault();
            const id = e.dataTransfer.getData('text/plain');
            if (id) onDropRecipe(id);
          }}
        >
          <span className="glyph" aria-hidden="true">{entry.glyph}</span>
          {/* A box, not a bare text node: on a phone the glyph is display:none
              and the name would be the button's only child — an anonymous flex
              item, which is the one thing iOS stops painting until a touch. */}
          <span className="rail-label">{t(entry.label)}</span>
        </button>
      ))}
      {/* The build this page came off, at the foot of the rail: an image on the
          NAS carries no other mark, so the version is how an operator tells the
          one that is up from the one they just built. Stamped at build time
          (vite.config), empty in a dev server, so the line only draws when
          there is something to say. */}
      {VERSION ? <span className="rail-version">{VERSION}</span> : null}
    </nav>
  );
}