import LayoutWithNav from "@/components/layout/LayoutWithNav";
import { Button } from "antd";
import { useUser } from "context/UserContext";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { SyncLoader } from "react-spinners";
import { getToken } from "utilFuncs/utilFunctions";
import { Tabs } from "antd";
import React from "react";
import UserProfileImage from "@/components/layout/UserProfileImage";
import { NextSeo } from "next-seo";
import { useQuery } from "react-query";
import {
  fetchMyAds,
  fetchUser,
  fetchUserDetails,
  myAds,
} from "apiCalls/apiEndpoints";
import { Row, Col, Divider, Card, notification } from "antd";
import Image from "next/image";
import Link from "next/link";
import LoadingIndicator from "@/components/loaders/LoadingIndicator";

const { TabPane } = Tabs;

const UserDetails: NextPage = () => {
  const router = useRouter();

  const { user, setUser } = useUser();

  const { user_name } = router.query;

  //get my ads
  const { data: adsData, isLoading: adsDataLoading } = useQuery(
    ["user-ads", user_name],
    fetchMyAds
  );
  const [userAds, setuserAds] = useState(adsData?.data.ads);

  //get user details
  const { data, isLoading : isFetchingUser } = useQuery(
    ["ad-user-profile", user_name],
    fetchUserDetails
  );


  const [name, setname] = useState(data?.data.name);

  const onChange = (key: string) => {
    console.log(key);
  };

  return (
    <LayoutWithNav page_title="profile" description="Profile">
      <NextSeo
        title={`${user_name} - User Profile | Ashantiweb.com`}
        description={user_name}
      />
      <section className="container mx-auto lg:px-40 mt-20">
        <div className="w-full d-flex flex-col justify-center">
          <div className="ml-2">
            <UserProfileImage data={data} />
          </div>
          <p className="text-gray-600 font-semibold">{data?.data.name} ({isFetchingUser ? 'loading, please wait...' : data?.data.username})</p>
        </div>
        <Tabs defaultActiveKey="1" onChange={onChange}>
          <TabPane tab={`My Ads (${adsData?.data.ads?.length ? adsData?.data.ads?.length : ''})`} key="1">
            {/* <Button onClick={viewAllAds} type="primary">
              View All Ads
            </Button> */}
            {adsDataLoading ? <LoadingIndicator /> : null}

            {/* grid of the all the users ads */}
            {adsData?.data.ads?.length <= 0 ? (
              "User does not have ads"
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 my-4">
                {adsData?.data.ads?.map((item: any, index: any) => (
                  <Link
                    href={`/ad/${item?.slug}`}
                    key={index}
                    className="cursor-pointer"
                    passHref
                  >
                    <a>
                      <div
                        key={index}
                        className="cursor-pointer border shadow-md rounded-md"
                      >
                        <div className="h-40 md:h-44 lg:h-52 w-full relative">
                          <Image
                            layout="fill"
                            src={item?.picture}
                            alt={item?.name}
                            placeholder="blur"
                            blurDataURL="/assets/images/preloader/preloader-static6.png"
                          />
                        </div>
                        <div className="p-2">
                          <p className="font-normal text-gray-700 h-12 mb-2">
                            {item?.name?.slice(0, 30)}
                          </p>
                          <p className="font-bold text-green-500 mt-2">
                            {item?.currency} {item?.price}
                          </p>
                        </div>
                        {/* <p>{ads?.model?.name}</p>
  <p>price of item</p> */}
                      </div>
                    </a>
                  </Link>
                ))}
              </div>
            )}
          </TabPane>
          <TabPane tab="Contact" key="2">
            <p className="text-gray-500">Phone</p>

            <a
              className="flex text-gray-600 font-semibold hover:text-green-600"
              href={`tel:${data?.data.phone}`}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
                className="w-6 h-6 mr-2"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M20.25 3.75v4.5m0-4.5h-4.5m4.5 0l-6 6m3 12c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 014.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 00-.38 1.21 12.035 12.035 0 007.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 011.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 01-2.25 2.25h-2.25z"
                />
              </svg>
              {data?.data.phone}
            </a>

            {/* <p className='text-gray-600'> {user?.phone}</p> */}
            <p className="mt-3 text-gray-500">Email</p>
            <a
              className="text-gray-600 font-semibold hover:text-green-600"
              href={`mailto:${data?.data.email}`}
            >
              {data?.data.email}
            </a>
            {/* <p className='text-gray-600'>{user?.email}</p> */}
          </TabPane>
        </Tabs>
      </section>
    </LayoutWithNav>
  );
};

export default UserDetails;

export async function getServerSideProps({ res, req }: any) {
  return {
    props: {}, // will be passed to the page component as props
  };
}