'use client'
import { Section } from '@/components/ui/section'
import React, { useState } from 'react'
import { PrivacyPolicy } from '@/payload-types'
import { Button } from '@/components/ui/button'
import { MarkComponent } from '@/lib/utils/MarkComponent'
import { Sidebar } from './Sidebar'
import { cn } from '@/lib/utils/cn'
import { SelectNew } from '@/components/shared/form/select'
import Link from 'next/link'

interface Props extends PrivacyPolicy {
  initialActiveTab: 'privacy policy' | 'cookies policy' | 'terms and conditions'
}

export const MainSection: React.FC<Props> = ({ tabs = [], initialActiveTab }) => {

  const initialIndex = tabs.findIndex(
    (tab) => tab.tab.title.toLowerCase() === initialActiveTab.toLowerCase()
  )

  const [activeTab, setActiveTab] = useState(initialIndex !== -1 ? initialIndex : 0)
  const [dataTabs, setDataTabs] = useState(tabs)

  return (
    <>
      <Section
        sectionClass="pt-[96px] xl:pt-[80px] tablet:pb-[100px] pb-[75px]  relative bg-basic-black overflow-hidden"
        boxClass="relative mt-12 tablet:mt-[56px] xl:mt-[100px]"
      >
        <div className=" absolute top-[-20px] left-[-128px] w-[396px] h-[120px] rounded-[396px] bg-[#D39E7F] blur-[165px]"></div>

        <div className="relative z-[10] max-tablet:gap-y-10 flex flex-col tablet:flex-row gap-x-[20px] justify-between">
          <div className="flex flex-col w-full">
            <div className="flex justify-between items-center ">
              <h2 className="h1 text-base-white">{tabs[activeTab].tab.title}</h2>
              <div className="flex gap-x-2 bg-grey-900 rounded-[12px] p-2">
                {tabs.map((el, i) => {
                  return (
                    <Button
                      asChild
                      key={i}
                      variant="toggle"
                      selected={activeTab === i}
                      onClick={() => setActiveTab(i)}
                    >
                      <Link href={`/${el.tab.title.toLowerCase().replace(/\s+/g, '-')}`}>{el.tab.title}</Link>
                    </Button>
                  )
                })}
              </div>
            </div>
            <div className="grid mt-20 gap-x-10 gap-y-6 xl:gap-y-0 grid-cols-1 xl:grid-cols-[minmax(200px,683px)_384px] xl:justify-between">
              <SelectNew
                stateMode
                propsData={[
                  { value: 'Option 1', i: 0 },
                  { value: 'Option 2', i: 1 },
                  { value: 'Option 3', i: 2 },
                ]}
                containerClass="w-full xl:hidden"
                label="Label"
                name="name"
                placeholder="Placeholder"
                options={{}}
              />
              <div className="flex flex-col gap-y-4 relative">
              <div className=" absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[76px] h-1/2 rounded-full bg-[#D39E7F] blur-[170px]"></div>

                {tabs[activeTab].tab.fields.map((el, i) => {
                  return (
                    <div
                      id={`privacy${i}`}
                      key={i}
                      className={cn(` p-4 bg-base-white/8 rounded-[8px]`)}
                    >
                      <h2 className="subheadline-semibold text-base-white ">{el.title}</h2>
                      <div className="mt-2 b3-regular text-grey-200">
                        <MarkComponent title={el.description} />
                      </div>
                    </div>
                  )
                })}
              </div>

              <Sidebar
                data={tabs[activeTab].tab.fields.map((field, index) => ({
                  title: field.title,
                  id: `content${index}`,
                  value: field.description,
                }))}
              />
            </div>
          </div>
        </div>
      </Section>
    </>
  )
}
