"use client";

import * as React from "react";
import { Trash2Icon } from "lucide-react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { ActionBar } from "@/components/medora/action-bar";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toast";

const FIELDS = ["Product name", "Generic name", "Strength", "Form", "Barcode", "Category", "Supplier", "Cost price", "Selling price", "Reorder level", "Reorder quantity", "Shelf"];

export function ActionBarSection() {
  return (
    <Section
      id="action-bar"
      title="Action bar"
      description="The end of every form, in the same place: Cancel then the primary on the right, a destructive action for the record on the left, apart from Save. Long forms make it sticky, with a shadow only while fields scroll under it."
    >
      <div className="grid gap-4 md:grid-cols-2">
        <Example title="Sticky, long form" description="Scroll the form: the shadow appears while fields pass under the bar and goes when you reach the end" bare>
          <div className="h-[340px] overflow-y-auto px-4 pt-4">
            <div className="space-y-4">
              {FIELDS.map((f) => (
                <Field key={f}>
                  <FieldLabel htmlFor={`ab-${f}`}>{f}</FieldLabel>
                  <Input id={`ab-${f}`} />
                </Field>
              ))}
            </div>
            <ActionBar sticky destructive={<DeleteButton />}>
              <Button variant="ghost">Cancel</Button>
              <Button onClick={() => toast.add({ title: "Product saved" })}>Save product</Button>
            </ActionBar>
          </div>
        </Example>
        <div className="space-y-4">
          <Example title="Short form" description="Not sticky; no destructive action on a new record">
            <div className="space-y-4">
              <Field>
                <FieldLabel htmlFor="ab-cat">Category name</FieldLabel>
                <Input id="ab-cat" />
              </Field>
              <ActionBar>
                <Button variant="ghost">Cancel</Button>
                <Button>Save category</Button>
              </ActionBar>
            </div>
          </Example>
          <Example title="With a note" description="Says what happens before the user commits">
            <ActionBar note="An Admin approves the write-off before stock changes.">
              <Button variant="ghost">Cancel</Button>
              <Button>Submit for approval</Button>
            </ActionBar>
          </Example>
        </div>
      </div>
    </Section>
  );
}

function DeleteButton() {
  return (
    <Button variant="ghost" className="text-status-error-text hover:text-status-error-text">
      <Trash2Icon data-icon="inline-start" />
      Delete product
    </Button>
  );
}