"use client";

import { memo } from "react";
import Icon from "../../asset/icon";
import Vertical from "../../buttons/Vertical";
import {
  ADD_CUSTOM_FIELD_TYPE_ICONS,
  type AddCustomFieldType,
  type AddCustomFieldViewProps,
} from "./AddCustomField.types";

function FieldTypeButton({
  type,
  label,
  onSelect,
}: {
  type: AddCustomFieldType;
  label: string;
  onSelect?: (t: AddCustomFieldType) => void;
}) {
  return (
    <Vertical
      type="button"
      ariaLabel={label}
      onClick={() => onSelect?.(type)}
    >
      <span className="flex h-8 w-8 shrink-0 items-center justify-center">
        <Icon
          name={ADD_CUSTOM_FIELD_TYPE_ICONS[type]}
          size={32}
          className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
        />
      </span>
      <span className="w-full text-center text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
        {label}
      </span>
    </Vertical>
  );
}

function AddCustomFieldViewComponent({
  active,
  onPressAdd,
  onSelectFieldType,
  ctaLabel,
  fieldTypeLabels,
  className,
}: AddCustomFieldViewProps) {
  if (!active) {
    return (
      <button
        type="button"
        onClick={onPressAdd}
        className={`flex h-[88px] w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
      >
        <span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden
          >
            <path
              d="M12 5v14M5 12h14"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
            />
          </svg>
          {ctaLabel}
        </span>
      </button>
    );
  }

  const expandedShellClasses = ["flex w-full shrink-0", className ?? ""]
    .join(" ")
    .trim();

  return (
    <div className={expandedShellClasses}>
      <div className="grid w-full grid-cols-4 gap-3">
        <FieldTypeButton
          type="text"
          label={fieldTypeLabels.text}
          onSelect={onSelectFieldType}
        />
        <FieldTypeButton
          type="badges"
          label={fieldTypeLabels.badges}
          onSelect={onSelectFieldType}
        />
        <FieldTypeButton
          type="upload"
          label={fieldTypeLabels.upload}
          onSelect={onSelectFieldType}
        />
        <FieldTypeButton
          type="proportion"
          label={fieldTypeLabels.proportion}
          onSelect={onSelectFieldType}
        />
      </div>
    </div>
  );
}

export const AddCustomFieldView = memo(AddCustomFieldViewComponent);
AddCustomFieldView.displayName = "AddCustomFieldView";