'use client';

import ImageSelector from '@/components/chat/ImageSelector';
import { ChatEntity, MessageBase } from '@/lib/types';
import { fetcher } from '@/lib/utils';
import Image from 'next/image';
import { useRouter } from 'next/navigation';

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

const examples: Example[] = [
  {
    url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
    initMessages: [
      {
        role: 'user',
        content: 'how many cereals are there in the image?',
        id: 'fake-id-1',
      },
    ],
  },
  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
];

export default function Page() {
  const router = useRouter();
  return (
    <div className="mx-auto max-w-2xl px-4 mt-8">
      <div className="rounded-lg border bg-background p-8">
        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
        <p>
          Vision Agent is a library that helps you utilize agent frameworks for
          your vision tasks. Vision Agent aims to provide an in-seconds
          experience by allowing users to describe their problem in text and
          utilizing agent frameworks to solve the task for them. Check out our
          discord for updates and roadmap!
        </p>
        <ImageSelector />
        <p className="mt-4 mb-2">
          You can also choose from below examples we provided
        </p>
        <div className="flex">
          {examples.map(({ url, initMessages }, index) => (
            <Image
              src={url}
              key={index}
              width={120}
              height={120}
              alt="example images"
              className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
              onClick={async () => {
                const resp = await fetcher<ChatEntity>('/api/upload', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({ url, initMessages }),
                });
                if (resp) {
                  router.push(`/chat/${resp.id}`);
                }
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}