import React, { useCallback, useRef, useState } from "react";
import Dropdown from "../Shared/SettingsDropdown";
import Input from "@/components/Low/Input";
import { generate } from "../Shared/Generate";
import GenerateBtn from "../Shared/GenerateBtn";
import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";
import { Difficulty, WritingExercise } from "@/interfaces/exam";
import clsx from "clsx";
import { FaFileUpload } from "react-icons/fa";
import ReactSelect, { components } from "react-select";
import Option from "@/interfaces/option" 
import { MdSignalCellularAlt } from "react-icons/md";
import { capitalize } from "lodash";


interface Props {
    localSettings: WritingSectionSettings | LevelSectionSettings;
    updateLocalAndScheduleGlobal: (updates: Partial<WritingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
    currentSection?: WritingExercise;
    level?: boolean;
}

const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndScheduleGlobal, level }) => {
    const { currentModule, dispatch } = useExamEditorStore();
    const {
        difficulty,
        focusedSection,
        type,
        academic_url
    } = useExamEditorStore((store) => store.modules["writing"]);

    const randomDiff = difficulty.length === 1 
            ? capitalize(difficulty[0])
            : difficulty.length == 0 ?
                "Random" :  
                `Selected (${difficulty.sort().map(dif => capitalize(dif)).join(", ")})` as Difficulty;
    
    const DIFFICULTIES = difficulty.length === 1 
        ? ["A1", "A2", "B1", "B2", "C1", "C2", "Random"]
        : ["A1", "A2", "B1", "B2", "C1", "C2", randomDiff, "Random"];

    const difficultyOptions: Option[] = DIFFICULTIES.map(level => ({
        label: level,
        value: level
    }));
    const [specificDiff, setSpecificDiff] = useState(randomDiff);

    const generatePassage = useCallback((sectionId: number) => {
        if (type === "academic" && academic_url !== undefined && sectionId == 1) {
            generate(
                sectionId,
                currentModule,
                "writing",
                {
                    method: 'POST',
                    queryParams: {
                        difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
                        type: type!
                    },
                    files: {
                        file: academic_url!,
                    }
                },
                (data: any) => [{
                    prompt: data.question,
                    difficulty: data.difficulty
                }]
            )
        } else {
            generate(
                sectionId,
                currentModule,
                "writing",
                {
                    method: 'GET',
                    queryParams: {
                        difficulty: specificDiff.length == 2 ? [specificDiff] : difficulty,
                        type: type!,
                        ...(localSettings.writingTopic && { topic: localSettings.writingTopic })
                    }
                },
                (data: any) => [{
                    prompt: data.question,
                    difficulty: data.difficulty
                }]
            );
        }
    }, [type, academic_url, currentModule, specificDiff, difficulty, localSettings.writingTopic]);

    const onTopicChange = useCallback((writingTopic: string) => {
        updateLocalAndScheduleGlobal({ writingTopic });
    }, [updateLocalAndScheduleGlobal]);

    const fileInputRef = useRef<HTMLInputElement>(null);

    const triggerFileInput = () => {
        fileInputRef.current?.click();
    };

    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
            const blobUrl = URL.createObjectURL(file);
            if (academic_url !== undefined) {
                URL.revokeObjectURL(academic_url);
            }
            dispatch({ type: "UPDATE_MODULE", payload: { updates: { academic_url: blobUrl } } });
        }
    };

    return (
        <>
            {type === "academic" && focusedSection === 1 && <Dropdown
                title="Upload Image"
                module={"writing"}
                open={localSettings.isImageUploadOpen}
                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
                contentWrapperClassName={level ? `border border-ielts-writing` : ''}
            >
                <div className="flex w-full flex-row gap-2 items-center px-2 pb-4">
                    <div className="flex w-full flex-col gap-4"> 
                        <div className="flex flex-col gap-2">
                            <label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
                            <ReactSelect
                                options={difficultyOptions}
                                value={difficultyOptions.find(opt => opt.value === specificDiff)}
                                onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
                                menuPortalTarget={document?.body}
                                components={{
                                    IndicatorSeparator: null,
                                    ValueContainer: ({ children, ...props }) => (
                                        <components.ValueContainer {...props}>
                                            <div className="flex flex-row gap-2 items-center pl-4">
                                                <MdSignalCellularAlt size={14} className="text-gray-600" />
                                                {children}
                                            </div>
                                        </components.ValueContainer>
                                    )
                                }}
                                styles={{
                                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                                    control: (styles) => ({
                                        ...styles,
                                        minHeight: '50px',
                                        border: '1px solid #e5e7eb',
                                        borderRadius: '0.5rem',
                                        boxShadow: 'none',
                                        backgroundColor: 'white',
                                        cursor: 'pointer',
                                        '&:hover': {
                                            border: '1px solid #e5e7eb',
                                        }
                                    }),
                                    valueContainer: (styles) => ({
                                        ...styles,
                                        padding: '0 8px',
                                        display: 'flex',
                                        alignItems: 'center'
                                    }),
                                    input: (styles) => ({
                                        ...styles,
                                        margin: '0',
                                        padding: '0'
                                    }),
                                    dropdownIndicator: (styles) => ({
                                        ...styles,
                                        padding: '8px'
                                    }),
                                    option: (styles, state) => ({
                                        ...styles,
                                        backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
                                        color: state.isFocused ? "black" : styles.color,
                                    }),
                                }}
                                className="text-sm"
                            />
                        </div>
                        <div className="flex flex-row justify-between gap-4">
                            <span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim flex-grow">
                                Upload a graph, chart or diagram
                            </span>
                            <input
                                type="file"
                                accept="image/png, image/jpeg"
                                onChange={handleFileUpload}
                                style={{ display: 'none' }}
                                ref={fileInputRef}
                            />
                            <button
                                key={`section-${focusedSection}`}
                                className={clsx(
                                    "flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
                                    `bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
                                )}
                                onClick={triggerFileInput}
                            >
                                <div className="flex flex-row">
                                    <FaFileUpload className="mr-2" size={24} />
                                    <span>Upload</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </Dropdown>}
            {
                (type !== "academic" || (type === "academic" && focusedSection == 2)) && <Dropdown
                    title="Generate Instructions"
                    module={"writing"}
                    open={localSettings.isWritingTopicOpen}
                    setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
                    contentWrapperClassName={level ? `border border-ielts-writing` : ''}
                >
                    <div className="px-2 pb-4 flex flex-col w-full">
                        <div className="flex flex-col gap-4"> 
                            <div className="flex flex-col gap-2">
                                <label className="block font-normal text-base text-mti-gray-dim mb-2">Topic (Optional)</label>
                                <div className="flex gap-2 min-w-0">
                                    <Input
                                        key={`section-${focusedSection}`}
                                        type="text"
                                        placeholder="Topic"
                                        name="category"
                                        onChange={onTopicChange}
                                        roundness="xl"
                                        value={localSettings.writingTopic}
                                        thin
                                    />
                                </div>
                            </div>
                            <div className="flex flex-col gap-2">
                                <label className="block font-normal text-base text-mti-gray-dim mb-2">Difficulty (Optional)</label>
                                <ReactSelect
                                    options={difficultyOptions}
                                    value={difficultyOptions.find(opt => opt.value === specificDiff)}
                                    onChange={(value) => setSpecificDiff(value!.value as Difficulty)}
                                    menuPortalTarget={document?.body}
                                    components={{
                                        IndicatorSeparator: null,
                                        ValueContainer: ({ children, ...props }) => (
                                            <components.ValueContainer {...props}>
                                                <div className="flex flex-row gap-2 items-center pl-4">
                                                    <MdSignalCellularAlt size={14} className="text-gray-600" />
                                                    {children}
                                                </div>
                                            </components.ValueContainer>
                                        )
                                    }}
                                    styles={{
                                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                                        control: (styles) => ({
                                            ...styles,
                                            minHeight: '50px',
                                            border: '1px solid #e5e7eb',
                                            borderRadius: '0.5rem',
                                            boxShadow: 'none',
                                            backgroundColor: 'white',
                                            cursor: 'pointer',
                                            '&:hover': {
                                                border: '1px solid #e5e7eb',
                                            }
                                        }),
                                        valueContainer: (styles) => ({
                                            ...styles,
                                            padding: '0 8px',
                                            display: 'flex',
                                            alignItems: 'center'
                                        }),
                                        input: (styles) => ({
                                            ...styles,
                                            margin: '0',
                                            padding: '0'
                                        }),
                                        dropdownIndicator: (styles) => ({
                                            ...styles,
                                            padding: '8px'
                                        }),
                                        option: (styles, state) => ({
                                            ...styles,
                                            backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
                                            color: state.isFocused ? "black" : styles.color,
                                        }),
                                    }}
                                    className="text-sm"
                                />
                            </div>
                            <div className="flex w-full h-full justify-center items-center mt-2">
                                <GenerateBtn
                                    genType="writing"
                                    module={"writing"}
                                    sectionId={focusedSection}
                                    generateFnc={generatePassage}
                                />
                            </div>
                        </div>
                    </div>
                </Dropdown>
            }
        </>
    );
};

export default WritingComponents;