// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode, JSX } from 'react';
import { useId } from 'react';
import type { Meta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { AriaClickable } from './AriaClickable.dom.tsx';
import { AxoButton } from './AxoButton.dom.tsx';
import { tw } from './tw.dom.tsx';

export default {
  title: 'Axo/AriaClickable',
} satisfies Meta;

function Card(props: { children: ReactNode }) {
  return (
    <AriaClickable.Root
      className={tw(
        'group flex items-center gap-4 rounded-md border border-secondary p-4',
        'data-hovered:bg-surface-secondary',
        'data-pressed:bg-primary-pressed',
        'outline-none data-focused:axo-focus-ring'
      )}
    >
      {props.children}
    </AriaClickable.Root>
  );
}

function CardTitle(props: { children: ReactNode }) {
  return (
    <h3 className={tw('type-title-medium text-primary')}>{props.children}</h3>
  );
}

function CardContent(props: { children: ReactNode }) {
  return <div className={tw('flex-1')}>{props.children}</div>;
}

function CardSeeMoreLink(props: { onClick: () => void; children: ReactNode }) {
  const id = useId();
  return (
    <>
      <span
        id={id}
        className={tw('text-accent', 'group-data-hovered:underline')}
      >
        {props.children}
      </span>
      <AriaClickable.HiddenTrigger labelledby={id} onClick={props.onClick} />
    </>
  );
}

function CardActions(props: { children: ReactNode }) {
  return (
    <AriaClickable.DeadArea
      className={tw('flex w-fit shrink-0 items-center gap-4 rounded-full')}
    >
      {props.children}
    </AriaClickable.DeadArea>
  );
}

function CardButton(props: {
  variant: AxoButton.Variant;
  onClick: () => void;
  children: ReactNode;
}) {
  return (
    <AriaClickable.SubWidget>
      <AxoButton.Root variant={props.variant} size="md" onClick={props.onClick}>
        {props.children}
      </AxoButton.Root>
    </AriaClickable.SubWidget>
  );
}

export function Basic(): JSX.Element | null {
  return (
    <Card>
      <CardContent>
        <CardTitle>Card Title</CardTitle>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit...{' '}
          <CardSeeMoreLink onClick={action('onSeeMore')}>
            See more
          </CardSeeMoreLink>
        </p>
      </CardContent>
      <CardActions>
        <CardButton variant="implied-primary" onClick={action('onEdit')}>
          Edit
        </CardButton>
        <CardButton variant="strong-destructive" onClick={action('onDelete')}>
          Delete
        </CardButton>
      </CardActions>
    </Card>
  );
}
