frondend/components/Course/Accordion.tsx

"use client"
import React from 'react'
import Collapse from './Collapse'
import ScheduleCollapse from './ScheduleCollapse'
import { CoursesProps, ScheduleProps, RerganizedScheduleProps } from '@/types'


async function reorganizedSchedule(schedule: ScheduleProps[]) {

    const sortedSchedule = schedule.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());

    // Then, reorganize the sorted schedule
    const reorganizedSchedule = sortedSchedule.reduce<Record<string, { yearAndMonth: string; schedule: ScheduleProps[] }>>((acc, item) => {
        const date = new Date(item.date);
        const yearMonth = `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月`;

        if (!acc[yearMonth]) {
            acc[yearMonth] = {
                yearAndMonth: yearMonth,
                schedule: []
            };
        }

        acc[yearMonth].schedule.push(item);

        return acc;
    }, {});

    return Object.values(reorganizedSchedule);
}



const Accordion = async ({ courseData }: { courseData: CoursesProps }) => {
    const newSchedule = await reorganizedSchedule(courseData.schedule)

    const fakeData = [
        {
            "yearAndMonth": "2024年10月",
            "schedule": [
                {
                    "info2": "A room, 14F, Sha Tin Market, N.T.",
                    "info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
                    "id": "e19a7934-82fe-4027-aca6-57a419e9623e",
                    "title": "A班",
                    "date": "2024-10-05T01:30:00Z",
                    "course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
                },
                {
                    "info2": "Room B, Sheung Shui Village, N.T.",
                    "info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
                    "id": "dc49a1b6-1c1f-44d6-bc52-b757aeba7b5b",
                    "title": "B班",
                    "date": "2024-10-05T01:31:00Z",
                    "course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
                },
                {
                    "info2": "Room B, Sheung Shui Village, N.T.",
                    "info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
                    "id": "d4785a90-311b-4a91-8fb7-beb077245f4f",
                    "title": "A班",
                    "date": "2024-10-06T01:31:00Z",
                    "course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
                }
            ]
        },
        {
            "yearAndMonth": "2024年11月",
            "schedule": [
                {
                    "info2": "Room B, Sheung Shui Village, N.T.",
                    "info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
                    "id": "5c88b2a7-6b4d-455f-b341-1fec3173d208",
                    "title": "A班",
                    "date": "2024-11-06T01:31:00Z",
                    "course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
                }
            ]
        },
        {
            "yearAndMonth": "2025年01月",
            "schedule": [
                {
                    "info2": "Room B, Sheung Shui Village, N.T.",
                    "info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
                    "id": "8a30dec2-63ed-4237-8f5b-177c42f29dda",
                    "title": "B班",
                    "date": "2025-01-04T01:31:00Z",
                    "course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
                },
                {
                    "info2": "Room B, Sheung Shui Village, N.T.",
                    "info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
                    "id": "86ddf906-499b-4dbd-967d-cc4dddd9f27b",
                    "title": "A班",
                    "date": "2025-01-05T01:31:00Z",
                    "course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
                }
            ]
        }
    ]
    console.log(newSchedule)
    return (
        <div className='relative flex flex-col w-full h-auto items-center pb-60'>
            <Collapse title='課程資訊' children={courseData.information} />
            <Collapse title='課程內容' children={courseData.contant} info={true} info_images={courseData.info_images} />
            <Collapse title='備註' children={courseData.remark} />
            <p className='text-5xl text-center mt-48'>
                {"課程時間表"}
            </p>
            {
                fakeData.map((item, index) => {
                    return (
                        <ScheduleCollapse key={index} title={item.yearAndMonth} rerganizedSchedule={{ yearAndMonth: item.yearAndMonth, schedules: item.schedule }} />
                    )
                })
            }
            <div className="bg-[url('/images/014.png')] absolute bottom-0 inset-0 h-auto w-full bg-contain bg-bottom bg-no-repeat -z-10"></div>

        </div>
    )
}

export default Accordion