import LayoutWithNav from '@/components/layout/LayoutWithNav';
import StandardContainer from '@/components/layout/StandardContainer';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import type { RadioChangeEvent } from 'antd';
import { Tabs } from 'antd';
import { NextSeo } from 'next-seo'
import { useRouter } from 'next/router'
import React, { useState } from 'react'
import { fetchShopDetails } from 'apiCalls/apiEndpoints';
import ImageWithFallback from '@/components/layout/ImageWithFallback';
import SingleAd from '@/components/featured_ads/SingleAd';

const { TabPane } = Tabs;

function ShopDetails({ shop_details_data }: any) {
  console.log(shop_details_data)
  const router = useRouter()
  const { shop_details } = router.query;

  const [size, setSize] = useState<SizeType>('small');

  const onChange = (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };

  return (
    <LayoutWithNav>
      <NextSeo
        title={`${shop_details} | Ashantiweb.com`}
        description='Shop'
      />
      <div className='h-20 bg-green-600'>

      </div>
      <StandardContainer>
        <div className='h-28 w-28 bg-gray-300 rounded-full -mt-32 relative'>
          <ImageWithFallback src={shop_details_data?.picture} alt={shop_details_data?.name} layout='fill' />
        </div>
        <div>
          <h2 className='mt-3 font-semibold text-2xl'>{shop_details_data?.name ?? 'n/a'}</h2>
          <p className='font-normal text-gray-500'>
            {shop_details_data?.description ?? 'n/a'}
          </p>
        </div>

        <div className='mt-3'>
          <Tabs defaultActiveKey="1" type="card" size={size}>
            <TabPane tab="Ads" key="1">
              <section className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 my-4">
                {shop_details_data.ads.map((ads: any, i: number) => (
                  <SingleAd
                    key={i}
                    slug={ads?.slug}
                    price={ads?.price}
                    name={ads?.name?.slice(0, 30)}
                    picture={ads?.picture} />
                ))}
              </section>
            </TabPane>
            <TabPane tab="About" key="2">
              <p className='font-normal text-sm text-gray-600'>{shop_details_data?.description ?? 'n/a'}</p>
            </TabPane>
            <TabPane tab="Gallery" key="3">
              Gallery
            </TabPane>
            <TabPane tab="Contact" key="4">
              <p className='font-normal text-sm text-gray-600'>
                Email:  <a className='text-blue-600' href={`mailto:${shop_details_data?.email}`}>{shop_details_data?.email ?? 'n/a'}</a>
              </p>
              <p className='font-normal text-sm text-gray-600'>
                Tel:  <a className='text-blue-600' href={`tel:${shop_details_data?.phone}`}>{shop_details_data?.phone ?? 'n/a'}</a>
              </p>
            </TabPane>
          </Tabs>
        </div>
        <div className='container mx-auto md:flex center mt-16'>
          <div className='w-11/12 h-40 bg-gray-400 text-black center'>
            Ad space
          </div>
        </div>
      </StandardContainer>
    </LayoutWithNav>
  )
}

export async function getServerSideProps({ req, res, params }: any) {
  const { shop_details } = params
  const data = await fetchShopDetails(shop_details)
  
  return {
    props: {
      shop_details_data: data.data
    }
  }
}

export default ShopDetails