'use client';

import React, { useState } from 'react';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { cn, fetcher } from '@/lib/utils';
import { SignedPayload, MessageBase, ChatEntity } from '@/lib/types';
import { useRouter } from 'next/navigation';
import Loading from '../ui/Loading';
import toast from 'react-hot-toast';

export interface ImageSelectorProps {}

type Example = {
  url: string;
  initMessages: MessageBase[];
};

const ImageSelector: React.FC<ImageSelectorProps> = () => {
  const router = useRouter();
  const [isUploading, setUploading] = useState(false);
  const { getRootProps, getInputProps, isDragActive } = useImageUpload(
    undefined,
    async files => {
      const formData = new FormData();
      if (files.length !== 1) {
        throw new Error('Only one image can be uploaded at a time');
      }
      setUploading(true);
      const reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = async () => {
        const { id, signedUrl, publicUrl, fields } =
          await fetcher<SignedPayload>('/api/sign', {
            method: 'POST',
            body: JSON.stringify({
              fileType: files[0].type,
              fileName: files[0].name,
            }),
          });
        const formData = new FormData();
        Object.entries(fields).forEach(([key, value]) => {
          formData.append(key, value as string);
        });
        formData.append('file', files[0]);

        const uploadResponse = await fetch(signedUrl, {
          method: 'POST',
          body: formData,
        });
        if (!uploadResponse.ok) {
          toast.error(uploadResponse.statusText);
          return;
        }
        const resp = await fetcher<ChatEntity>('/api/upload', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            id,
            url: publicUrl,
          }),
        });
        setUploading(false);
        if (resp) {
          router.push(`/chat/${resp.id}`);
        }
      };
    },
  );
  return (
    <div
      {...getRootProps()}
      className={cn(
        'dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer',
        isDragActive && 'bg-gray-500/50 border-solid',
      )}
    >
      <input {...getInputProps()} />
      <div className="text-gray-400 text-md">
        {isUploading ? (
          <Loading />
        ) : (
          'Start using Vision Agent by selecting an image'
        )}
      </div>
    </div>
  );
};

export default ImageSelector;
