import React, { useState, useRef, useEffect } from 'react'
import { cn } from '../utils'
import { VscAdd, VscChromeMinimize } from "react-icons/vsc";
import { ScheduleProps } from '@/types';
import moment from 'moment';

interface CollapseProps {
    title: string
    rerganizedSchedule?: {
        yearAndMonth: string
        schedules: ScheduleProps[]
    }

}

const ScheduleCollapse: React.FC<CollapseProps> = ({ title, rerganizedSchedule }) => {


    const [isOpen, setIsOpen] = useState(false)
    const [height, setHeight] = useState<number | undefined>(0)
    const ref = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (isOpen) setHeight(ref.current?.scrollHeight)
        else setHeight(0)
    }, [isOpen])

    return (
        <div className={cn('mt-6 rounded-3xl ')}>
            <button
                className={`flex justify-between items-center w-full p-6 text-left  ${isOpen ? "rounded-t-lg bg-[#D60050]" : "rounded-lg bg-[#F2D6D5] "}`}
                onClick={() => setIsOpen(!isOpen)}
            >
                <span className={`text-xl font-bold ml-3 ${isOpen ? "text-white " : " text-black"}`}>{title}</span>
                {isOpen ? (
                    <VscChromeMinimize className='text-white mr-3' />
                ) : (
                    <VscAdd className='text-black mr-3' />
                )}

            </button>
            <div
                ref={ref}
                style={{ height: height, }}
                className="flex relative overflow-hidden transition-[height] duration-300 ease-in-out "
            >
                <div className='relative flex flex-col bg-[#FAF6F5] rounded-b-lg w-[65vw] max-sm:w-[90vw]'>


                    {rerganizedSchedule ? (
                        <div className='px-12 py-14'>
                            {rerganizedSchedule.schedules.map((schedule, index) => (
                                <div key={index} className='mb-4'>
                                    <h3 className='text-base font-bold'>
                                    { moment.utc(schedule.date).format("MM月DD日")}
                                    </h3>
                                    <p className='text-gray-600'>{schedule.title}</p>
                                    <p className='text-gray-600'>{schedule.info1}</p>
                                    <p className='text-gray-600'>{schedule.info2}</p>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div

                        />
                    )}

                </div>
            </div>
        </div>
    )

}
export default ScheduleCollapse