import React, {useRef, useState} from 'react';
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
import styles from "./SettingSurvey.module.css";
import TimeEvent from "../TimeEvent/TimeEvent.tsx";
import {ISurvey} from "../../api/SurveyApi.ts";
import {useLocation, useOutletContext} from "react-router-dom";
import {useSurveyContext} from "../../context/SurveyContext.tsx";


const SettingSurvey: React.FC = () => {
    const location = useLocation();
    const isSettingCreatePage = location.pathname.includes('/survey/create');
    const { survey, setSurvey } = useOutletContext<{
        survey: ISurvey;
        setSurvey: (survey: ISurvey) => void;
    }>();
    const { tempSurvey, setTempSurvey } = useSurveyContext();
    const [showPopup, setShowPopup] = useState(false);
    const buttonRef = useRef<HTMLButtonElement>(null);

    const handleCopyLink = () => {
        if (!survey?.id) return;
        const link = `${window.location.origin}/complete-survey/${survey.id}`;
        navigator.clipboard.writeText(link)
            .then(() => {
                setShowPopup(true);
                setTimeout(() => setShowPopup(false), 2000);
            })
            .catch(error => console.error(`Не удалось скопировать ссылку: ${error}`));
    }

    return (
        <div className={styles.settingSurvey}>
            {isSettingCreatePage ? (
                <SurveyInfo
                    titleSurvey={tempSurvey.title}
                    descriptionSurvey={tempSurvey.description}
                    setDescriptionSurvey={(value) => setTempSurvey({ ...tempSurvey, description: value })}
                    setTitleSurvey={(value) => setTempSurvey({ ...tempSurvey, title: value })}
                />
                ) : (
                <SurveyInfo
                    titleSurvey={survey.title}
                    descriptionSurvey={survey.description}
                    setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
                    setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
                />
            )}
            <div className={styles.startEndTime}>
                <TimeEvent title='Время начала'/>
                <TimeEvent title='Время окончания'/>
            </div>
            <div className={styles.param}>
                <h2>Параметры видимости</h2>
            </div>
            {!isSettingCreatePage && (
                <div className={styles.buttonContainer}>
                    <button
                        ref={buttonRef}
                        onClick={handleCopyLink}
                        className={styles.copyButton}
                    >
                        Копировать ссылку
                    </button>
                    {showPopup && (
                        <div className={styles.popup}>
                            Ссылка скопирована
                        </div>
                    )}
                </div>
            )}
        </div>
    )
}

export default SettingSurvey;