Attachment Display Field

/**
 * @file ui:attachment-display-field
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import {
  IconArrowClockwiseCircularFill,
  IconCameraFill,
  IconExclamationmarkCircleFill,
  IconXmarkFill,
} from "@karrotmarket/react-monochrome-icon";
import type { FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
import {
  AttachmentDisplay as SeedAttachmentDisplay,
  Icon,
  PrefixIcon,
  VisuallyHidden,
} from "@seed-design/react";
import {
  type DisplayItemEntry,
  type UseAttachmentDisplayReturn,
  useAttachmentDisplayContext,
} from "@seed-design/react/primitive";
import * as React from "react";

import { ProgressCircle } from "./progress-circle";

// You may implement your own i18n for these labels
const LABEL_SELECT_FILE = "파일 선택";
const LABEL_RETRY = "재시도";
const LABEL_REMOVE = "파일 제거";

export interface AttachmentDisplayFieldProps
  extends Omit<SeedAttachmentDisplay.RootProps, "asChild"> {
  label?: React.ReactNode;
  /**
   * @default "medium"
   */
  labelWeight?: FieldLabelVariantProps["weight"];

  indicator?: React.ReactNode;

  description?: React.ReactNode;
  errorMessage?: React.ReactNode;
  showRequiredIndicator?: boolean;
}

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplayField = React.forwardRef<HTMLDivElement, AttachmentDisplayFieldProps>(
  (
    {
      label,
      labelWeight,
      indicator,
      description,
      errorMessage,
      showRequiredIndicator,
      children,
      ...props
    },
    ref,
  ) => {
    const renderHeader = label || indicator;
    const renderDescription = !!description;
    const renderErrorMessage = errorMessage && props.invalid;
    const renderFooter = renderDescription || renderErrorMessage;

    return (
      <SeedAttachmentDisplay.Root ref={ref} {...props}>
        {renderHeader && (
          <SeedAttachmentDisplay.Header>
            <SeedAttachmentDisplay.Label weight={labelWeight}>
              {label}
              {showRequiredIndicator && <SeedAttachmentDisplay.RequiredIndicator />}
              {indicator && (
                <SeedAttachmentDisplay.IndicatorText>
                  {indicator}
                </SeedAttachmentDisplay.IndicatorText>
              )}
            </SeedAttachmentDisplay.Label>
            {/* You might want to put your custom element here */}
          </SeedAttachmentDisplay.Header>
        )}
        <SeedAttachmentDisplay.Control>{children}</SeedAttachmentDisplay.Control>
        {renderFooter && (
          <SeedAttachmentDisplay.Footer>
            {renderDescription &&
              (renderErrorMessage ? (
                <VisuallyHidden asChild>
                  <SeedAttachmentDisplay.Description>
                    {description}
                  </SeedAttachmentDisplay.Description>
                </VisuallyHidden>
              ) : (
                <SeedAttachmentDisplay.Description>{description}</SeedAttachmentDisplay.Description>
              ))}
            {renderErrorMessage && (
              <SeedAttachmentDisplay.ErrorMessage>
                <PrefixIcon svg={<IconExclamationmarkCircleFill />} />
                {errorMessage}
              </SeedAttachmentDisplay.ErrorMessage>
            )}
          </SeedAttachmentDisplay.Footer>
        )}
      </SeedAttachmentDisplay.Root>
    );
  },
);
AttachmentDisplayField.displayName = "AttachmentDisplayField";

export type AttachmentDisplayProps = {
  onTriggerClick: (
    helpers: Pick<UseAttachmentDisplayReturn, "addEntries" | "updateEntryStatus">,
  ) => void;
} & (
  | { children: SeedAttachmentDisplay.ContextProps["children"]; onRetry?: never }
  | {
      children?: undefined;
      onRetry?: (
        entry: DisplayItemEntry,
        helpers: Pick<UseAttachmentDisplayReturn, "updateEntryStatus">,
      ) => void;
    }
);

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplay = React.forwardRef<HTMLDivElement, AttachmentDisplayProps>(
  ({ onTriggerClick, children, onRetry }, ref) => {
    const { addEntries, updateEntryStatus } = useAttachmentDisplayContext();

    return (
      <SeedAttachmentDisplay.Container ref={ref}>
        <SeedAttachmentDisplay.Trigger
          onClick={() => onTriggerClick({ addEntries, updateEntryStatus })}
          aria-label={LABEL_SELECT_FILE}
        >
          <SeedAttachmentDisplay.TriggerIcon image={<IconCameraFill />} />
          <SeedAttachmentDisplay.TriggerItemCount />
        </SeedAttachmentDisplay.Trigger>
        <SeedAttachmentDisplay.ItemGroup>
          <SeedAttachmentDisplay.Context>
            {typeof children === "function"
              ? children
              : ({ entries }) =>
                  entries.map((entry) => (
                    <AttachmentDisplayItem
                      key={entry.id}
                      entry={entry}
                      {...(onRetry && { onRetry: () => onRetry(entry, { updateEntryStatus }) })}
                    />
                  ))}
          </SeedAttachmentDisplay.Context>
        </SeedAttachmentDisplay.ItemGroup>
      </SeedAttachmentDisplay.Container>
    );
  },
);
AttachmentDisplay.displayName = "AttachmentDisplay";

export interface AttachmentDisplayItemProps
  extends Omit<SeedAttachmentDisplay.ItemProps, "children"> {
  onRetry?: () => void;
}

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplayItem = React.forwardRef<HTMLLIElement, AttachmentDisplayItemProps>(
  ({ onRetry, ...props }, ref) => {
    return (
      <SeedAttachmentDisplay.Item ref={ref} {...props}>
        <SeedAttachmentDisplay.ItemImage />
        <SeedAttachmentDisplay.ItemBackdrop status="uploading">
          {(entry) => (
            <ProgressCircle
              size="24"
              tone="staticWhite"
              {...("progress" in entry && { value: entry.progress })}
            />
          )}
        </SeedAttachmentDisplay.ItemBackdrop>
        {onRetry && (
          <SeedAttachmentDisplay.ItemBackdrop status="error">
            <SeedAttachmentDisplay.ItemActionButton onClick={onRetry}>
              <Icon svg={<IconArrowClockwiseCircularFill />} />
              {LABEL_RETRY}
            </SeedAttachmentDisplay.ItemActionButton>
          </SeedAttachmentDisplay.ItemBackdrop>
        )}
        <SeedAttachmentDisplay.ItemRemoveButton aria-label={LABEL_REMOVE}>
          <Icon svg={<IconXmarkFill />} />
        </SeedAttachmentDisplay.ItemRemoveButton>
      </SeedAttachmentDisplay.Item>
    );
  },
);
AttachmentDisplayItem.displayName = "AttachmentDisplayItem";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

/**
 * @file ui:attachment-display-field-reorderable
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import {
  IconArrowClockwiseCircularFill,
  IconCameraFill,
  IconExclamationmarkCircleFill,
  IconXmarkFill,
} from "@karrotmarket/react-monochrome-icon";
import type { FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
import {
  AttachmentDisplay as SeedAttachmentDisplay,
  Icon,
  PrefixIcon,
  VisuallyHidden,
} from "@seed-design/react";
import {
  type DisplayItemEntry,
  type UseAttachmentDisplayReturn,
  useAttachmentDisplayContext,
} from "@seed-design/react/primitive";
import * as React from "react";

import { ProgressCircle } from "./progress-circle";

// You may implement your own i18n for these labels
const LABEL_SELECT_FILE = "파일 선택";
const LABEL_RETRY = "재시도";
const LABEL_REMOVE = "파일 제거";

export interface AttachmentDisplayFieldProps
  extends Omit<SeedAttachmentDisplay.RootProps, "asChild"> {
  label?: React.ReactNode;
  /**
   * @default "medium"
   */
  labelWeight?: FieldLabelVariantProps["weight"];

  indicator?: React.ReactNode;

  description?: React.ReactNode;
  errorMessage?: React.ReactNode;
  showRequiredIndicator?: boolean;
}

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplayField = React.forwardRef<HTMLDivElement, AttachmentDisplayFieldProps>(
  (
    {
      label,
      labelWeight,
      indicator,
      description,
      errorMessage,
      showRequiredIndicator,
      children,
      ...props
    },
    ref,
  ) => {
    const renderHeader = label || indicator;
    const renderDescription = !!description;
    const renderErrorMessage = errorMessage && props.invalid;
    const renderFooter = renderDescription || renderErrorMessage;

    return (
      <SeedAttachmentDisplay.Root ref={ref} {...props}>
        {renderHeader && (
          <SeedAttachmentDisplay.Header>
            <SeedAttachmentDisplay.Label weight={labelWeight}>
              {label}
              {showRequiredIndicator && <SeedAttachmentDisplay.RequiredIndicator />}
              {indicator && (
                <SeedAttachmentDisplay.IndicatorText>
                  {indicator}
                </SeedAttachmentDisplay.IndicatorText>
              )}
            </SeedAttachmentDisplay.Label>
            {/* You might want to put your custom element here */}
          </SeedAttachmentDisplay.Header>
        )}
        <SeedAttachmentDisplay.Control>{children}</SeedAttachmentDisplay.Control>
        {renderFooter && (
          <SeedAttachmentDisplay.Footer>
            {renderDescription &&
              (renderErrorMessage ? (
                <VisuallyHidden asChild>
                  <SeedAttachmentDisplay.Description>
                    {description}
                  </SeedAttachmentDisplay.Description>
                </VisuallyHidden>
              ) : (
                <SeedAttachmentDisplay.Description>{description}</SeedAttachmentDisplay.Description>
              ))}
            {renderErrorMessage && (
              <SeedAttachmentDisplay.ErrorMessage>
                <PrefixIcon svg={<IconExclamationmarkCircleFill />} />
                {errorMessage}
              </SeedAttachmentDisplay.ErrorMessage>
            )}
          </SeedAttachmentDisplay.Footer>
        )}
      </SeedAttachmentDisplay.Root>
    );
  },
);
AttachmentDisplayField.displayName = "AttachmentDisplayField";

export type AttachmentDisplayProps = {
  onTriggerClick: (
    helpers: Pick<UseAttachmentDisplayReturn, "addEntries" | "updateEntryStatus">,
  ) => void;
} & (
  | { children: SeedAttachmentDisplay.ContextProps["children"]; onRetry?: never }
  | {
      children?: undefined;
      onRetry?: (
        entry: DisplayItemEntry,
        helpers: Pick<UseAttachmentDisplayReturn, "updateEntryStatus">,
      ) => void;
    }
);

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplay = React.forwardRef<HTMLDivElement, AttachmentDisplayProps>(
  ({ onTriggerClick, children, onRetry }, ref) => {
    const { addEntries, updateEntryStatus } = useAttachmentDisplayContext();

    return (
      <SeedAttachmentDisplay.Container ref={ref}>
        <SeedAttachmentDisplay.Trigger
          onClick={() => onTriggerClick({ addEntries, updateEntryStatus })}
          aria-label={LABEL_SELECT_FILE}
        >
          <SeedAttachmentDisplay.TriggerIcon image={<IconCameraFill />} />
          <SeedAttachmentDisplay.TriggerItemCount />
        </SeedAttachmentDisplay.Trigger>
        <SeedAttachmentDisplay.ItemGroup>
          <SeedAttachmentDisplay.Context>
            {typeof children === "function"
              ? children
              : ({ entries }) =>
                  entries.map((entry) => (
                    <AttachmentDisplayItem
                      key={entry.id}
                      entry={entry}
                      {...(onRetry && { onRetry: () => onRetry(entry, { updateEntryStatus }) })}
                    />
                  ))}
          </SeedAttachmentDisplay.Context>
        </SeedAttachmentDisplay.ItemGroup>
      </SeedAttachmentDisplay.Container>
    );
  },
);
AttachmentDisplay.displayName = "AttachmentDisplay";

export interface AttachmentDisplayItemProps
  extends Omit<SeedAttachmentDisplay.ItemProps, "children"> {
  onRetry?: () => void;
}

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplayItem = React.forwardRef<HTMLLIElement, AttachmentDisplayItemProps>(
  ({ onRetry, ...props }, ref) => {
    return (
      <SeedAttachmentDisplay.Item ref={ref} {...props}>
        <SeedAttachmentDisplay.ItemImage />
        <SeedAttachmentDisplay.ItemBackdrop status="uploading">
          {(entry) => (
            <ProgressCircle
              size="24"
              tone="staticWhite"
              {...("progress" in entry && { value: entry.progress })}
            />
          )}
        </SeedAttachmentDisplay.ItemBackdrop>
        {onRetry && (
          <SeedAttachmentDisplay.ItemBackdrop status="error">
            <SeedAttachmentDisplay.ItemActionButton onClick={onRetry}>
              <Icon svg={<IconArrowClockwiseCircularFill />} />
              {LABEL_RETRY}
            </SeedAttachmentDisplay.ItemActionButton>
          </SeedAttachmentDisplay.ItemBackdrop>
        )}
        <SeedAttachmentDisplay.ItemRemoveButton aria-label={LABEL_REMOVE}>
          <Icon svg={<IconXmarkFill />} />
        </SeedAttachmentDisplay.ItemRemoveButton>
      </SeedAttachmentDisplay.Item>
    );
  },
);
AttachmentDisplayItem.displayName = "AttachmentDisplayItem";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

/**
 * @file ui:attachment-display-field-reorderable
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 * @requires @dnd-kit/react@^0.4.0
 * @requires @dnd-kit/abstract@^0.4.0
 * @requires @dnd-kit/dom@^0.4.0
 **/

"use client";

import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers";
import { Accessibility, AutoScroller } from "@dnd-kit/dom";
import { DragDropProvider } from "@dnd-kit/react";
import { isSortable, useSortable } from "@dnd-kit/react/sortable";
import { IconCameraFill } from "@karrotmarket/react-monochrome-icon";
import { AttachmentDisplay as SeedAttachmentDisplay } from "@seed-design/react";
import {
  type DisplayItemEntry,
  type UseAttachmentDisplayReturn,
  useAttachmentDisplayContext,
} from "@seed-design/react/primitive";
import * as React from "react";

import { AttachmentDisplayItem, type AttachmentDisplayItemProps } from "./attachment-display-field";

const LABEL_SELECT_FILE = "파일 선택";

const autoScrollerPlugin = AutoScroller.configure({ threshold: { x: 0.2, y: 0 } });

const accessibilityPlugin = Accessibility.configure({
  screenReaderInstructions: {
    draggable:
      "항목을 집어 항목 순서 변경을 시작하려면 스페이스 바를 누르세요. 방향키를 사용하여 순서를 변경한 뒤 스페이스 바를 다시 눌러 순서 변경을 종료하거나 Esc 키로 순서 변경을 취소할 수 있어요.",
  },
  announcements: {
    dragstart: ({ operation: { source } }) => {
      if (!source) return;

      return `${source.data.name} 항목 순서 변경을 시작했어요.`;
    },
    dragend: ({ operation: { source }, canceled }) => {
      if (!source || !isSortable(source)) return;

      if (canceled) return `${source.data.name} 항목 순서 변경을 취소했어요.`;

      return `${source.data.name} 항목을 ${source.sortable.index + 1}번째에 놓았어요.`;
    },
  },
} satisfies NonNullable<ConstructorParameters<typeof Accessibility>[1]>);

export type AttachmentDisplayReorderableProps = {
  onTriggerClick: (
    helpers: Pick<UseAttachmentDisplayReturn, "addEntries" | "updateEntryStatus">,
  ) => void;
} & (
  | { children: SeedAttachmentDisplay.ContextProps["children"]; onRetry?: never }
  | {
      children?: undefined;
      onRetry?: (
        entry: DisplayItemEntry,
        helpers: Pick<UseAttachmentDisplayReturn, "updateEntryStatus">,
      ) => void;
    }
);

/**
 * @see https://seed-design.io/react/components/attachment-display-field
 */
export const AttachmentDisplayReorderable = React.forwardRef<
  HTMLDivElement,
  AttachmentDisplayReorderableProps
>(function AttachmentDisplayReorderable({ onTriggerClick, onRetry, children }, ref) {
  const { addEntries, reorderEntry, updateEntryStatus } = useAttachmentDisplayContext();

  return (
    <DragDropProvider
      plugins={(defaults) => [...defaults, autoScrollerPlugin, accessibilityPlugin]}
      onDragEnd={({ canceled, operation: { source } }) => {
        if (canceled) return;
        if (!isSortable(source)) return;

        reorderEntry(source.sortable.initialIndex, source.sortable.index);
      }}
    >
      <SeedAttachmentDisplay.Container ref={ref}>
        <SeedAttachmentDisplay.Trigger
          onClick={() => onTriggerClick({ addEntries, updateEntryStatus })}
          aria-label={LABEL_SELECT_FILE}
        >
          <SeedAttachmentDisplay.TriggerIcon image={<IconCameraFill />} />
          <SeedAttachmentDisplay.TriggerItemCount />
        </SeedAttachmentDisplay.Trigger>
        <SeedAttachmentDisplay.ItemGroup>
          <SeedAttachmentDisplay.Context>
            {typeof children === "function"
              ? children
              : ({ entries }) =>
                  entries.map((entry, index) => (
                    <SortableAttachmentDisplayItem
                      key={entry.id}
                      entry={entry}
                      index={index}
                      {...(onRetry && { onRetry: () => onRetry(entry, { updateEntryStatus }) })}
                    />
                  ))}
          </SeedAttachmentDisplay.Context>
        </SeedAttachmentDisplay.ItemGroup>
      </SeedAttachmentDisplay.Container>
    </DragDropProvider>
  );
});
AttachmentDisplayReorderable.displayName = "AttachmentDisplayReorderable";

interface SortableAttachmentDisplayItemProps extends AttachmentDisplayItemProps {
  index: number;
  fileName?: string;
}

export const SortableAttachmentDisplayItem = React.forwardRef<
  HTMLLIElement,
  SortableAttachmentDisplayItemProps
>(({ entry, index, fileName, ...props }, _ref) => {
  const { readOnly } = useAttachmentDisplayContext();

  const { ref: sortableRef } = useSortable({
    id: entry.id,
    index,
    disabled: readOnly,
    modifiers: [RestrictToHorizontalAxis],
    data: { name: fileName ?? `${index + 1}번째 이미지` },
  });

  return <AttachmentDisplayItem ref={sortableRef} entry={entry} {...props} />;
});
SortableAttachmentDisplayItem.displayName = "SortableAttachmentDisplayItem";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */