@akinon/pz-theme 2.0.38-rc.0 → 2.0.39-beta.0

package/src/blocks/language-selector-block.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import React from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { readToggle } from './product-block-utils';
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+/**
+ * Functional chrome block: locale switcher rendered as inline codes
+ * (TR | EN) or a select. Locales come from the storefront settings; the
+ * editor owns placement, wording, separator and styling.
+ * Properties: mode, separator, showSeparator, uppercase, labelSource, gap,
+ * ariaLabel, emptyText.
+ * Parts: option-list, option (selected/hover), separator, dropdown.
+ */
+const LanguageSelectorBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const { locale, locales, setLocale } = useLocalization();
+
+  const mode = String(
+    getResponsiveValue(block.properties?.mode, currentBreakpoint, 'inline')
+  );
+  const separator = String(
+    getResponsiveValue(block.properties?.separator, currentBreakpoint, '|')
+  );
+  const uppercase =
+    String(
+      getResponsiveValue(block.properties?.uppercase, currentBreakpoint, 'true')
+    ) !== 'false';
+  const labelSource = String(
+    getResponsiveValue(
+      block.properties?.labelSource,
+      currentBreakpoint,
+      'label'
+    )
+  );
+  const ariaLabel = String(
+    getResponsiveValue(
+      block.properties?.ariaLabel,
+      currentBreakpoint,
+      'Language'
+    )
+  );
+  // Empty on purpose: the editor placeholder has always been built from the
+  // separator, so an unset override must keep doing exactly that.
+  const emptyText = String(
+    getResponsiveValue(block.properties?.emptyText, currentBreakpoint, '')
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 6),
+    6,
+    0,
+    32
+  );
+  const showSeparator = readToggle(
+    block.properties?.showSeparator,
+    currentBreakpoint,
+    true
+  );
+
+  const items = Array.isArray(locales) ? locales : [];
+
+  const format = (value: string) =>
+    uppercase ? String(value).toUpperCase() : String(value);
+
+  const readLabel = (item: { label?: string; value?: string }): string =>
+    labelSource === 'code'
+      ? String(item.value ?? '')
+      : String(item.label || item.value || '');
+
+  const change = (value: string) => {
+    if (isDesigner || value === locale) return;
+    setLocale?.(value);
+  };
+
+  if (items.length === 0) {
+    return isDesigner ? (
+      <span
+        data-language-selector=""
+        {...partAttrs('option-list', { empty: true })}
+      >
+        {emptyText || `TR ${separator} EN`}
+      </span>
+    ) : null;
+  }
+
+  if (mode === 'select') {
+    return (
+      <select
+        data-language-selector=""
+        {...partAttrs('dropdown')}
+        value={locale}
+        onChange={(event) => change(event.target.value)}
+        aria-label={ariaLabel}
+        style={{
+          background: 'transparent',
+          border: 'none',
+          color: 'inherit',
+          cursor: 'pointer',
+          outline: 'none'
+        }}
+      >
+        {items.map((item) => (
+          <option key={item.value} value={item.value}>
+            {format(readLabel(item))}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  return (
+    <span
+      data-language-selector=""
+      {...partAttrs('option-list')}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: `${gap}px`
+      }}
+    >
+      {items.map((item, index) => {
+        const active = item.value === locale;
+
+        return (
+          <React.Fragment key={item.value}>
+            {index > 0 && showSeparator && (
+              <span aria-hidden="true" {...partAttrs('separator')}>
+                {separator}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={() => change(item.value)}
+              aria-current={active}
+              data-language-option={active ? 'selected' : 'default'}
+              {...partAttrs('option', { selected: active })}
+              style={{
+                background: 'none',
+                border: 'none',
+                padding: 0,
+                cursor: 'pointer',
+                color: 'inherit',
+                opacity: active ? 1 : 0.6,
+                fontWeight: active ? 600 : 400
+              }}
+            >
+              {format(readLabel(item))}
+            </button>
+          </React.Fragment>
+        );
+      })}
+    </span>
+  );
+};
+
+export default LanguageSelectorBlock;