reui-blocks/blocks/companies-create5.tsx

"use client";

import { Plus } from "lucide-react";
import { useRef, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

interface FileInputProps {
  onChange?: (file: File | null) => void;
  value?: File | null;
  alt?: string;
  className?: string;
}

const FileInput = ({
  onChange,
  value,
  alt,
  className,
  ...props
}: FileInputProps) => {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <>
      <input
        ref={inputRef}
        type="file"
        className="hidden"
        accept="image/*"
        onChange={(e) => onChange?.(e.target.files?.[0] || null)}
        {...props}
      />
      <div
        role="input"
        tabIndex={0}
        onClick={() => inputRef.current?.click()}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            inputRef.current?.click();
          }
        }}
        className={cn(
          "flex size-26 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border text-muted-foreground shadow-xs sm:size-34",
          className,
        )}
      >
        {!value ? (
          <Plus />
        ) : (
          <img
            src={URL.createObjectURL(value)}
            alt={alt}
            className="size-full object-cover"
          />
        )}
      </div>
    </>
  );
};

interface CompaniesCreate5Props {
  className?: string;
  title?: string;
}

const CompaniesCreate5 = ({
  className,
  title = "ایجاد پروفایل شرکت",
}: CompaniesCreate5Props) => {
  const [formData, setFormData] = useState<Record<string, string>>({});
  const [logo, setLogo] = useState<File | null>(null);

  const FIELDS = [
    {
      label: "تلفن",
      name: "phone",
      type: "tel",
      placeholder: "۰۹۱۲ ۳۴۵ ۶۷۸۹",
    },
    {
      label: "آدرس",
      name: "address",
      type: "text",
      placeholder: "تهران، خیابان ولیعصر، پلاک ۱۲",
    },
    {
      label: "وب‌سایت",
      name: "website",
      type: "url",
      placeholder: "https://example.ir",
    },
  ];

  const handleInputChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <section className="py-32">
      <div className="container flex justify-center">
        <Dialog>
          <DialogTrigger asChild>
            <Button>ثبت شرکت</Button>
          </DialogTrigger>
          <DialogContent
            showCloseButton={false}
            className={cn(
              "w-full rounded-lg bg-background p-0 md:max-w-3xl",
              className,
            )}
          >
            <DialogTitle className="px-6 pt-6">{title}</DialogTitle>
            <form
              autoComplete="off"
              onSubmit={(e) => e.preventDefault()}
              className="mt-2"
            >
              <div className="flex flex-col gap-6 px-6 md:flex-row md:items-center">
                <FileInput
                  onChange={(file) => setLogo(file)}
                  value={logo}
                  alt="لوگوی شرکت"
                />
                <div className="grid w-full gap-x-6 gap-y-4 md:grid-cols-2">
                  <div className="relative grid w-full gap-2">
                    <div className="flex h-full items-center gap-2 text-foreground/80">
                      <Label
                        htmlFor="name"
                        className={cn(
                          "min-w-0 truncate",
                          "after:ms-1 after:text-destructive after:content-['*']",
                        )}
                      >
                        نام شرکت
                                                                    </Label>
                    </div>
                    <Input
                      name="name"
                      placeholder="نام رسمی شرکت"
                      value={formData["name"] || ""}
                      onChange={(e) =>
                        handleInputChange("name", e.target.value)
                      }
                      type="text"
                      required={true}
                      className="!bg-transparent"
                    />
                  </div>
                  <div className="relative grid w-full gap-2">
                    <div className="flex h-full items-center gap-2 text-foreground/80">
                      <Label
                        htmlFor="email"
                        className={cn(
                          "min-w-0 truncate",
                          "after:ms-1 after:text-destructive after:content-['*']",
                        )}
                      >
                        ایمیل
                      </Label>
                    </div>
                    <Input
                      name="email"
                      placeholder="info@example.ir"
                      value={formData["email"] || ""}
                      onChange={(e) =>
                        handleInputChange("email", e.target.value)
                      }
                      type="email"
                      required={true}
                      className="!bg-transparent"
                    />
                  </div>
                  <div className="relative grid w-full gap-2 md:col-span-2">
                    <div className="flex h-full items-center gap-2 text-foreground/80">
                      <Label htmlFor="description" className="min-w-0 truncate">
                        معرفی شرکت
                                                                    </Label>
                    </div>
                    <Input
                      name="description"
                      placeholder="معرفی کوتاهی از فعالیت‌ها، محصولات و خدمات شرکت بنویسید..."
                      value={formData["description"] || ""}
                      onChange={(e) =>
                        handleInputChange("description", e.target.value)
                      }
                      type="text"
                      className="!bg-transparent"
                    />
                  </div>
                </div>
              </div>
              <div className="grid gap-6 px-6 pt-4 pb-8 md:grid-cols-3">
                {FIELDS.map((field, i) => {
                  return (
                    <div
                      key={`companies-create-5-field-${i}-${field.label}`}
                      className="relative grid w-full gap-2"
                    >
                      <div className="flex h-full items-center gap-2 text-foreground/80">
                        <Label
                          htmlFor={field.name}
                          className="min-w-0 truncate"
                        >
                          {field.label}
                        </Label>
                      </div>
                      <Input
                        name={field.name}
                        placeholder={field.placeholder}
                        value={formData[field.name] || ""}
                        onChange={(e) =>
                          handleInputChange(field.name, e.target.value)
                        }
                        type={field.type}
                        className="!bg-transparent"
                      />
                    </div>
                  );
                })}
              </div>
              <div className="flex w-full px-6 py-4 sm:justify-end sm:border-t">
                <Button type="submit">ایجاد پروفایل</Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>
    </section>
  );
};

export { CompaniesCreate5 };