import {
    AddIcon,
    ArrowIcon,
    CloseIcon,
    KebabIcon,
    LocationIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import { useVersionHistoryStore } from "../../../../store/builder/useVersionHistoryStore";
import { useSubModuleStore } from "../../../../store/useModuleStore";
import useVersionHistoryVisibleStore from "../../../../store/builder/store";
import { useParams } from "react-router-dom";
import { getVersionDataApi } from "../../../../services/factoryBuilder/versionControl/getVersionDataApi";
import { useVersionContext } from "../../../../modules/builder/version/versionContext";

const VersionHistory = () => {
    const { setSubModule } = useSubModuleStore();
    const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
    const { versionHistory, setCreateNewVersion } = useVersionHistoryStore();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion, setSelectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    const addNewVersion = () => {
        setCreateNewVersion(true);
    };

    const handleSelectVersion = (version: Version) => {
        if (!projectId) return;

        getVersionDataApi(projectId, version.versionId).then((versionData) => {
            setSelectedVersion(version);
            // console.log(versionData);
        }).catch((err) => {
            // console.log(err);
        })
    };

    const handleVersionNameChange = (newName: string, versionId: string) => {

    };

    return (
        <div className="version-history-container">
            {/* Header */}
            <div className="version-history-header">
                <div className="version-history-title">Version History</div>
                <div className="version-history-icons">
                    <button
                        id="add-version"
                        className="icon add-icon"
                        onClick={addNewVersion}
                    >
                        <AddIcon />
                    </button>
                    <div id="version-kebab" className="icon kebab-icon">
                        <KebabIcon />
                    </div>
                    <div
                        id="version-close"
                        className="icon close-icon"
                        onClick={() => {
                            setSubModule("properties");
                            setVersionHistoryVisible(false);
                        }}
                    >
                        <CloseIcon />
                    </div>
                </div>
            </div>

            {/* Shortcut Info */}
            <div className="version-history-shortcut-info">
                <div className="info-icon">i</div>
                <div className="shortcut-text">
                    Press Ctrl + Alt + S to add to version history while editing
                </div>
            </div>

            {/* Current Version Display */}
            {selectedVersion && (
                <div className="version-history-location">
                    <div className="location-label">
                        <LocationIcon />
                    </div>
                    <div className="location-details">
                        <div className="current-version">
                            Current Version ({selectedVersion.version})
                        </div>
                        <div className="saved-history-count">
                            {versionHistory.length} Saved History
                        </div>
                    </div>
                </div>
            )}

            {/* Versions List */}
            <div className="saved-versions-list">
                {versionHistory.length === 0 ? (
                    <div className="no-versions-message">No saved versions</div>
                ) : (
                    versionHistory.map((version) => {
                        const key = `version-${version.versionId}`;
                        return (
                            <VersionHistoryItem
                                key={key}
                                version={version}
                                onSelect={handleSelectVersion}
                                onRename={handleVersionNameChange}
                            />
                        );
                    })

                )}
            </div>
        </div>
    );
};

export default VersionHistory;

type VersionHistoryItemProps = {
    version: Version;
    onSelect: (version: Version) => void;
    onRename: (newName: string, versionId: string) => void;
};

const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({ version, onSelect, onRename }) => {
    return (
        <button
            className="saved-version"
        >
            <div
                className="version-name"
                onClick={() => onSelect(version)}
            >
                v {version.version}
            </div>
            <div className="version-details">
                <div className="details">
                    <span className="timestamp">
                        <RenameInput
                            value={version.versionName ? version.versionName : version.timeStamp}
                            onRename={(newName) => onRename(newName, version.versionId)}
                        />
                    </span>
                    <span className="saved-by">
                        <div className="user-profile">{version.createdBy[0]}</div>
                        <div className="user-name">{version.createdBy}</div>
                    </span>
                </div>
                <ArrowIcon />
            </div>
        </button>
    );
};
