'use client'
import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
import EqualizerIcon from '@/components/icons/EqualizerIcon';
import TelegramIcon from '@/components/icons/TelegramIcon';
import TabContainer from '@/components/tab/TabContainer';
import { TabHeader } from '@/components/tab/TabHeader';
import Comment from '@/components/utils/Comment';
import RateBar from '@/components/utils/RateBar';
import { AboutDataModel } from '@/lib/api/info/getAboutData';
import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, Star1, Whatsapp } from 'iconsax-react';
import { useQueryState } from 'next-usequerystate';
import Image from 'next/image';
import React, { useCallback, useState } from 'react'

const sortings = [
  'جدیدترین',
  'قدیمی ترین'
]

function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
  const [sortingModal, setSortingModal] = useState(false);
  const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });

  const toggleSortingModal = useCallback(() => {
    setSortingModal((state) => !state);
  }, []);

  const changeSorting = (index: number) => {
    setSorting(() => String(index));
    setSortingModal(false);
  }

  const firstTab = () => {
    return (
      <section aria-labelledby="about-title" className='py-4'>
        <section
          className="bg-container rounded-container shadow-container p-4">
          <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
            <div className="">
              <h2 className='text-sm2 font-bold leading-5'>{data.title_fa}</h2>
              <p className="text-sm2 leading-5 mt-4">تاسیس: {data.foundationDate}</p>
              <p className="text-sm2 leading-5 mt-2">نوع محصولات: {data.offering}</p>
            </div>
            <div className="rounded-normal overflow-clip">
              <Image
                alt='logo'
                src={'/assets/images/food-preview.png'}
                width={88}
                height={88}
                unoptimized
                priority
              />
            </div>
          </div>
          <div className="mt-[23px]">
            <h3 className="text-sm2 font-bold leading-5">درباره مجموعه</h3>
            <p className="text-sm2 leading-5 mt-3 border-spacing-48" style={{ wordSpacing: '0.01em' }}>
              {data.description}
            </p>
            <div className='inline-flex gap-2 mt-[23px] items-center'>
              <Gallery size={20} className='stroke-disabled-text' />
              <span className='text-sm2 text-disabled-text font-medium pt-0.5'>عکس های رستوران</span>
            </div>
          </div>
        </section>

        <section
          className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
          <h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
          <div className='col-span-1 text-center flex justify-center gap-4'>
            {data.contacts.phone &&
              <a href={`tel://${data.contacts.phone}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
                <CallCalling className='stroke-foreground' size={24} />
              </a>
            }
            {data.contacts.telegram &&
              <a href={`https://t.me/${data.contacts.telegram}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
                <TelegramIcon className='stroke-foreground' width={24} height={24} />
              </a>
            }
            {data.contacts.whatsapp &&
              <a href={`https://whatsapp.com/?phone=${data.contacts.whatsapp}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
                <Whatsapp className='stroke-foreground' size={24} />
              </a>
            }
            {data.contacts.instagram &&
              <a href={`https://instagram.com/${data.contacts.instagram}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
                <Instagram className='stroke-foreground' size={24} />
              </a>
            }
          </div>
        </section>

        <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
          <h2 className='text-sm2 font-medium leading-5'>آدرس</h2>
          <p className='text-sm2 mt-[9px] leading-5'>{data.address}</p>
          <div className='inline-flex gap-2 mt-[23px] items-center '>
            <Location size={20} className='stroke-disabled-text' />
            <span className='text-sm2 text-disabled-text '>عکس های رستوران</span>
          </div>
        </section>

        <section
          aria-label='ساعات کاری'
          className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
          <div className="flex items-center gap-2 justify-start">
            <Clock size={16} className='stroke-disabled-text' />
            <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
            <div className='size-1.5 bg-[#D9D9D9] rounded-full'></div>
            <div className='text-sm2 mt-0.5'>امروز از ساعت 10:30 تا 17:30 </div>
          </div>
          <div className="">
            <ArrowDown2 size={16} className='stroke-[#292D32]' />
          </div>
        </section>

        <section>
          {data.open.map((v, index) => {
            return (
              <div
                key={index}
                style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
                className="bg-[#F6F6FA] rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
                <div className="text-sm2">
                  {v.day}
                </div>
                <div className='text-sm2 font-light'>
                  {v.close} - {v.open}
                </div>
              </div>
            )
          })}
        </section>
      </section>
    )
  }

  const secondTab = () => {

    return (
      <section aria-labelledby="reviews-title" className='py-4'>
        <section
          aria-label='امتیاز کاربران'
          className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
          <div className="text-center font-bold text-5xl">
            4.1
          </div>
          <div className="">
            <RateBar className='mt-1' content='5' percentage='55' />
            <RateBar className='mt-1' content='4' percentage='32' />
            <RateBar className='mt-1' content='3' percentage='70' />
            <RateBar className='mt-1' content='2' percentage='12' />
            <RateBar className='mt-1' content='1' percentage='89' />
          </div>
        </section>

        <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
          <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
            <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
              <EqualizerIcon />
              <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
            </button>
          </div>
          <div className="">

            <article>
              <Comment
                className='pt-8'
                user='علیرضا عابدزاده'
                rating={5.0}
                date='18 آذر 1401'
                text='لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است'
                tags={['پیتزا قارچ مخصوص', 'چیز برگر ژیوان']}
              />
            </article>

          </div>
        </section>
        <AnimatedBottomSheet title="مرتب کردن بر اساس" visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
          <div className="px-8.5 py-10 justify-between">
            {sortings.map((v, i) => {
              return (
                <div key={i}>
                  <div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
                    {v}
                  </div>
                  {i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
                </div>
              )
            })}
          </div>
        </AnimatedBottomSheet>
      </section>
    )
  }

  return (
    <div className='pt-8 h-full overflow-y-auto noscrollbar'>
      <TabContainer>
        <TabHeader
          viewRenderer={firstTab()}
          title='درباره ما' icon={<InfoCircle size={24} />}>
        </TabHeader>
        <TabHeader
          viewRenderer={secondTab()}
          title='امتیازات و نظرات' icon={<Star1 size={24} />}>
        </TabHeader>
      </TabContainer>
    </div>
  )
}


export default AboutPage