import { FormGroup } from "@/components";
import { Button, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui";
import { t } from "i18next";
import { Upload } from "lucide-react";
import { useFormContext } from "react-hook-form";

export const QuoteDocumentsCardEditor = () => {
  /*const { uploadFiles, progresses, uploadedFiles, isUploading } = useUploadFile("imageUploader", {
    defaultUploadedFiles: [],
  });*/

  const { control, formState } = useFormContext();

  return (
    <div className='grid gap-6 md:grid-cols-6'>
      <FormGroup
        className='md:col-span-4'
        title={t("quotes.create.form_groups.documents.title")}
        description={t("quotes.create.form_groups.documents.desc")}
      >
        <FormField
          control={control}
          name='images'
          render={() => (
            <div className='space-y-6'>
              <FormItem className='w-full'>
                <FormLabel>Images</FormLabel>
                <FormControl></FormControl>
                <FormMessage />
              </FormItem>
            </div>
          )}
        />
        <Button className='w-fit' disabled={formState.disabled}>
          Save
        </Button>
      </FormGroup>
    </div>
  );

  return (
    <div className='grid gap-6 md:grid-cols-6'>
      <FormGroup
        className='md:col-span-4'
        title={t("quotes.create.form_groups.documents.title")}
        description={t("quotes.create.form_groups.documents.desc")}
      >
        <div className='grid gap-2'>
          <img
            alt='Product image'
            className='object-cover w-full rounded-md aspect-square'
            height='300'
            src='https://placehold.co/300'
            width='300'
          />
          <div className='grid grid-cols-3 gap-2'>
            <button>
              <img
                alt='Product image'
                className='object-cover w-full rounded-md aspect-square'
                height='84'
                src='https://placehold.co/84'
                width='84'
              />
            </button>
            <button>
              <img
                alt='Product image'
                className='object-cover w-full rounded-md aspect-square'
                height='84'
                src='https://placehold.co/84'
                width='84'
              />
            </button>
            <button className='flex items-center justify-center w-full border border-dashed rounded-md aspect-square'>
              <Upload className='w-4 h-4 text-muted-foreground' />
              <span className='sr-only'>{t("common.upload")}</span>
            </button>
          </div>
        </div>
      </FormGroup>
    </div>
  );
};
