import { useState } from 'react';
import { Tag } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { ScheduleDTO } from '../../../types/schedule';
import { i18nText } from '../../../i18nKeys';
import { getCurrentTime, getTimeString } from '../../../utils/time';
import { ExpertData } from '../../../types/profile';
import { LinkButton } from '../../view/LinkButton';
import { EditExpertScheduleModal } from '../../Modals/EditExpertScheduleModal';

type ExpertScheduleProps = {
    locale: string;
    data?: ScheduleDTO;
    updateExpert: (key: keyof ExpertData) => void;
};

export const ExpertSchedule = ({ locale, data, updateExpert }: ExpertScheduleProps) => {
    const [showEdit, setShowEdit] = useState<boolean>(false);

    return (
        <div className="coaching-section__wrap">
            <div className="coaching-section">
                <div className="coaching-section__title">
                    <h2 className="title-h2">{i18nText('schedule', locale)}</h2>
                    <LinkButton
                        type="link"
                        icon={<EditOutlined />}
                        onClick={() => setShowEdit(true)}
                    />
                </div>
                <div className="b-schedule-list">
                    {data && data?.workingTimes?.map((date, index) => {
                        const { startDay, startTimeMin, endTimeMin } = getCurrentTime(date, dayjs().format('Z'));

                        return (
                            <div key={`date_${index}`}>
                                <Tag className="skills__list__item">{i18nText(startDay, locale)}</Tag>
                                <div>{startTimeMin ? getTimeString(startTimeMin) : '00:00'}</div>
                                <span>-</span>
                                <div>{endTimeMin ? getTimeString(endTimeMin) : '00:00'}</div>
                            </div>
                        )
                    })}
                </div>
            </div>
            <EditExpertScheduleModal
                open={showEdit}
                handleCancel={() => setShowEdit(false)}
                locale={locale}
                data={data}
                refresh={() => updateExpert('schedule')}
            />
        </div>
    );
};