"use client"

// import { PrismaClient } from '@prisma/client';
import { startTransition, useEffect, useState } from 'react';
import { Button } from './ui/button';
import { Prisma, User, Follows } from '@prisma/client';
import { useRouter } from "next/navigation";

// 1: Define a type that includes the relation to `Post`
const userWithFollows = Prisma.validator<Prisma.UserArgs>()({
  include: { followers: true, following: true },
})

// 2: Define a type that only contains a subset of the scalar fields
const userPersonalData = Prisma.validator<Prisma.UserArgs>()({
  select: { email: true, name: true },
})

// 3: This type will include a user and all their posts
type UserWithFollows = Prisma.UserGetPayload<typeof userWithFollows>


export default function FollowButton({ user, followingId }: { user: UserWithFollows; followingId: string }) {
  const [isFollowing, setIsFollowing] = useState(false);
  const [follows, setFollows] = useState([]);
  const [buttonPressed, setButtonPress] = useState(false);
  const router = useRouter();

  async function fetchFollows() {

    try {
      const response = await fetch('/api/followers')

      const data = await response.json()
      setFollows(data.follows)
      setIsFollowing(false)
      data.follows?.forEach((f: Follows) => {

        if (f.followerId == user.id && f.followingId == followingId) {
          setIsFollowing(true)
          return;
        }
      })
    } catch (error) {

    }
  }
  useEffect(() => {
    fetchFollows()
  }, [buttonPressed])

  async function handleFollow(e: any) {
    e.preventDefault()

    const response = await fetch('/api/followers', {
      method: 'PUT',
      body: JSON.stringify({ user, followingId })
    })

    setButtonPress(!buttonPressed)
  }

  console.log(isFollowing)

  return (
    <Button onClick={handleFollow}>
      {isFollowing ? 'Unfollow' : 'Follow'}
    </Button>
  );
}