import LayoutWithNav from "@/components/layout/LayoutWithNav";
import type { NextPage } from "next";
import {
  Typography,
  Avatar,
  Menu,
  Dropdown,
  Button,
  Col,
  Row,
  Card,
  Breadcrumb,
} from "antd";
import Link from "next/link";
import Image from "next/image";
import classifiedHeader from "assets/images/page-header.png";
import classifiedsHeadIcon from "assets/images/classifieds-head-icon.png";
import { classifiedCategoriesWithSubcategories } from "apiCalls/apiEndpoints";
import OnpageSearch from "@/components/search/OnpageSearch";
import { NextSeo } from "next-seo";
import useInitGAd from "@/components/hooks/useInitGAd";
import { useQuery } from "react-query";
import { useEffect, useState } from "react";
import StandardContainer from "@/components/layout/StandardContainer";
import SectionHeader from "@/components/classifieds_section/SectionHeader";

const Classifieds: NextPage = ({ classifieds }: any) => {
  // console.log('classifieds', classifieds);
  useInitGAd();

  // const [classifieds, setclassifieds] = useState([]);
  // const { data, isLoading, status } = useQuery(
  //   ["classifieds"],
  //   classifiedCategoriesWithSubcategories
  // );
  // useEffect(() => {
  //   if (status == "success") {
  //     setclassifieds(data.data.data);
  //   }
  // }, [status]);

  return (
    <LayoutWithNav page_title="Classifieds" description="description">
      <NextSeo
        title={`Classifieds | Ashantiweb.com`}
        description={`Classifieds of businesses in the Ashanti Region`}
      />

      <SectionHeader
        classifiedsImage={classifiedHeader}
        sectionTitle="Ashanti Classifieds"
        classifiedsHeadIcon={classifiedsHeadIcon}
      />

      <section className="mx-auto px-5 lg:px-10">
        <div className="row justify-content-center">
          <div className="col-lg-7">
            <div className="category-title text-center pt-5 lg:pt-3">
              <h4 className="title">
                Buy And Sell Everything From Our Top Classifieds; Property, Jobs
                And More
              </h4>
            </div>
          </div>
        </div>

        {/* {classifieds?.map((cl: any) => (
            <Col key={cl.id} xs={{ span: '24' }} md={{ span: '6' }} className="text-center">
              <Card>
                <Avatar shape="square" size={64} src={cl.picture} />
                <br />
                <Typography.Link href={'/' + cl.slug} strong>
                  {cl.name}
                </Typography.Link>
                <br />
                <Typography.Paragraph ellipsis={{ rows: 3, expandable: true, symbol: 'expand' }}>
                  {cl.description}
                </Typography.Paragraph>
                <Dropdown overlay={
                  <Menu>
                    {cl?.subclassifieds?.map((sc: any) =>
                      <Menu.Item key={sc.id}>
                        <Link href={'/ads/' + '/' + cl.slug + + sc.slug}>{sc.name}</Link>
                      </Menu.Item>
                    )}
                  </Menu>
                }>
                  <Button type='ghost'>View SubClassifieds</Button>
                </Dropdown>
              </Card>
            </Col>
          ))}  */}
        {/* <div className="flex justify-center items-center">
            <OnpageSearch category={"all categories"} unReplacedString={""} />
          </div> */}
      </section>

      <section className="container mx-auto lg:px-[80px]">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-4 ">
          {classifieds.map((cl: any, i: number) => (
            <Card key={i} className="text-center flex flex-col justify-between">
              <Link href={"/ads/" + cl.slug}>
                <a href="">
                  <Avatar shape="square" size={64} src={cl.picture} />
                </a>
              </Link>
              <br />

              <Link href={"/ads/" + cl.slug}>
                <Typography.Link href={"/ads/" + cl.slug} strong>
                  {cl.name}
                </Typography.Link>
              </Link>

              <br />

              <Link href={"/ads/" + cl.slug}>
                <a href="" className="cursor-pointer">
                  <Typography.Paragraph
                    ellipsis={{ rows: 3, expandable: true, symbol: "expand" }}
                  >
                    {cl.description}
                  </Typography.Paragraph>
                </a>
              </Link>

              <Dropdown
                overlay={
                  <Menu>
                    {cl?.subclassifieds?.map((sc: any) => (
                      <Menu.Item key={sc.id}>
                        <Link href={`/ads/${sc.slug}`}>{sc.name}</Link>
                      </Menu.Item>
                    ))}
                  </Menu>
                }
              >
                <Button type="ghost">View SubClassifieds</Button>
              </Dropdown>
            </Card>
          ))}
        </div>
      </section>
    </LayoutWithNav>
  );
};

export async function getServerSideProps({ req, res }: any) {
  const classifiedWithSubs = await classifiedCategoriesWithSubcategories();

  return {
    props: {
      classifieds: classifiedWithSubs.data.data,
    },
    // will be passed to the page component as props
  };
}

export default Classifieds;