Tag

'use client';

import * as React from 'react';
import { Tag } from './tag';

const FILTERS = ['Design', 'Product', 'Marketing'];
const CHANNELS = ['Email', 'SMS', 'Push'];

function Flag() {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16">
      <path d="M0 8a8 8 0 0 1 16 0Z" fill="var(--lunia-red-500)" />
      <path d="M0 8a8 8 0 0 0 16 0Z" fill="var(--lunia-base-white)" />
      <circle cx="8" cy="8" r="7.75" fill="none" stroke="var(--lunia-border-secondary)" strokeWidth="0.5" />
    </svg>
  );
}

function Person() {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" className="bg-tertiary text-fg-quaternary">
      <circle cx="8" cy="6.5" r="2.5" fill="currentColor" />
      <path d="M3 14.5a5 5 0 0 1 10 0Z" fill="currentColor" />
    </svg>
  );
}

export default function TagDemo({ replay = 0 }: { replay?: number }) {
  const [filters, setFilters] = React.useState(FILTERS);
  const [channels, setChannels] = React.useState([true, false, true]);
  const row = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    // The middle tag leaves and the row closes the gap, then it comes back.
    const button = row.current?.querySelector<HTMLButtonElement>('[data-tag="Product"] button');
    button?.click();
    const timer = window.setTimeout(() => setFilters(FILTERS), button ? 900 : 200);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div className="flex flex-col items-start gap-5">
      <div ref={row} className="flex flex-wrap items-center gap-2">
        {FILTERS.filter((name) => filters.includes(name)).map((name) => (
          <Tag
            key={name}
            data-tag={name}
            size="md"
            onRemove={() => setFilters((list) => list.filter((n) => n !== name))}
          >
            {name}
          </Tag>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Tag size="md" dot="fg-success-secondary">
          Active
        </Tag>
        <Tag size="md" leading={<Flag />}>
          Indonesia
        </Tag>
        <Tag size="md" leading={<Person />}>
          Olivia
        </Tag>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Tag size="lg" count={12}>
          Design
        </Tag>
        <Tag size="lg" count={8}>
          Engineering
        </Tag>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        {CHANNELS.map((name, i) => (
          <Tag
            key={name}
            checked={channels[i]}
            onCheckedChange={(value) => setChannels((list) => list.map((v, j) => (j === i ? value : v)))}
          >
            {name}
          </Tag>
        ))}
      </div>
    </div>
  );
}