import { DeviceType } from "@insite/client-framework/Types/ContentItemModel";
import AxiomIcon from "@insite/shell/Components/Icons/AxiomIcon";
import ClickerStyle from "@insite/shell/Components/Shell/ClickerStyle";
import shellTheme from "@insite/shell/ShellTheme";
import { TS } from "@insite/shell/TS";
import * as React from "react";

type OwnProps = {
    targetStageMode: DeviceType;
    disabled?: boolean;
    currentStageMode: DeviceType;
    changeStageMode: (stageMode: DeviceType) => void;
};

type Props = OwnProps;

class ViewPortClicker extends React.Component<Props> {
    onClick = () => {
        const { changeStageMode, targetStageMode } = this.props;
        changeStageMode(targetStageMode);
    };

    render() {
        const { currentStageMode, disabled, targetStageMode } = this.props;
        const targetMatchesCurrentStageMode = currentStageMode === targetStageMode;

        const {
            colors: { common, text },
        } = shellTheme;

        let iconColor: string;

        if (disabled) {
            iconColor = common.disabled;
        } else {
            iconColor = text.main;
        }

        const icon = targetStageMode === "Phone" ? "mobile" : targetStageMode === "Tablet" ? "tablet" : "display";

        const titleLabel =
            targetStageMode === "Phone"
                ? TS("Phone Preview")
                : targetStageMode === "Tablet"
                ? TS("Tablet Preview")
                : TS("Desktop Preview");

        return (
            <ClickerStyle
                active={targetMatchesCurrentStageMode}
                clickable={!targetMatchesCurrentStageMode}
                onClick={this.onClick}
                disabled={disabled}
                title={titleLabel}
            >
                <AxiomIcon src={icon} color={iconColor} size={20} />
            </ClickerStyle>
        );
    }
}

export default ViewPortClicker;
