'use client';

import { Button } from '@/components/actions/Button';
import { Accordion } from '@/components/controls/Accordion';
import { SegmentedControl } from '@/components/controls/SegmentedControl';
import { Tabs } from '@/components/controls/Tabs';
import { Alert } from '@/components/feedback/Alert';
import { Checkbox, Switch } from '@/components/forms/ChoiceControls';
import { FormField } from '@/components/forms/FormField';
import { TextInput } from '@/components/forms/TextInput';
import { DropdownMenu } from '@/components/overlays/DropdownMenu';
import { Dialog } from '@/components/overlays/Dialog';
import type { ComponentLabCopy } from '@/content/development/component-lab';
import { useRef, useState } from 'react';
import styles from './page.module.css';

export function ComponentLabInteractive({ copy }: { copy: ComponentLabCopy }) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [segment, setSegment] = useState('comfortable');
  const triggerRef = useRef<HTMLButtonElement>(null);
  return (
    <div className={styles.interactiveGrid}>
      <section className={styles.group} aria-labelledby="lab-actions">
        <h2 id="lab-actions">Actions</h2>
        <div className={styles.cluster}>
          <Button>{copy.actions.primary}</Button>
          <Button intent="conversion">{copy.actions.conversion}</Button>
          <Button loading>{copy.actions.loading}</Button>
          <Button disabled>{copy.actions.disabled}</Button>
          <Button ref={triggerRef} intent="secondary" onClick={() => setDialogOpen(true)}>
            {copy.dialog.open}
          </Button>
          <DropdownMenu
            label={copy.menu.label}
            items={[
              { id: 'review', label: copy.menu.first, onSelect: () => undefined },
              {
                id: 'archive',
                label: copy.menu.second,
                onSelect: () => undefined,
                destructive: true,
              },
            ]}
          />
        </div>
      </section>
      <section className={styles.group} aria-labelledby="lab-form">
        <h2 id="lab-form">Form controls</h2>
        <FormField
          id="fixture-email"
          label={copy.form.label}
          supportingText={copy.form.supporting}
          error={copy.form.error}
          required
        >
          <TextInput
            id="fixture-email"
            type="email"
            placeholder={copy.form.placeholder}
            invalid
            describedBy="fixture-email-help fixture-email-error"
          />
        </FormField>
        <Checkbox label={copy.form.checkbox} />
        <Switch label={copy.form.switch} />
        <SegmentedControl
          label="Density"
          value={segment}
          onChange={setSegment}
          options={[
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'compact', label: 'Compact' },
          ]}
        />
      </section>
      <section className={styles.group} aria-labelledby="lab-controls">
        <h2 id="lab-controls">Selection and disclosure</h2>
        <Tabs label={copy.tabs.label} items={copy.tabs.items} />
        <Accordion items={copy.accordion.items} />
      </section>
      <Alert tone="warning" title={copy.alert.title}>
        {copy.alert.body}
      </Alert>
      <Dialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        title={copy.dialog.title}
        description={copy.dialog.description}
        closeLabel={copy.dialog.close}
        returnFocusRef={triggerRef}
      >
        <p>{copy.dialog.content}</p>
      </Dialog>
    </div>
  );
}