import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ColorState, SketchPicker } from 'react-color';
import { Doc } from '../../fields/Doc';
import { Id } from '../../fields/FieldSymbols';
import { BoolCast, Cast, StrCast } from '../../fields/Types';
import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils';
import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
import { DocServer } from '../DocServer';
import { Networking } from '../Network';
import { MainViewModal } from '../views/MainViewModal';
import { FontIconBox } from '../views/nodes/button/FontIconBox';
import { DragManager } from './DragManager';
import { GroupManager } from './GroupManager';
import './SettingsManager.scss';
import { undoBatch } from './UndoManager';
import { Button, ColorPicker, Dropdown, DropdownType, Group, Size, Toggle, ToggleType, Type } from 'browndash-components';
import { BsGoogle } from 'react-icons/bs'
import { FaFillDrip, FaPalette } from 'react-icons/fa'
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;

export enum ColorScheme {
    Dark = '-Dark',
    Light = '-Light',
    System = '-MatchSystem',
}

export enum freeformScrollMode {
    Pan = 'pan',
    Zoom = 'zoom',
}

@observer
export class SettingsManager extends React.Component<{}> {
    public static Instance: SettingsManager;
    static _settingsStyle = addStyleSheet();
    @observable public isOpen = false;
    @observable private passwordResultText = '';
    @observable private playgroundMode = false;

    @observable private curr_password = '';
    @observable private new_password = '';
    @observable private new_confirm = '';
    @observable activeTab = 'Accounts';

    @observable public static propertiesWidth: number = 0;
    @observable public static headerBarHeight: number = 0;

    @computed get backgroundColor() {
        return Doc.UserDoc().activeCollectionBackground;
    }
    @computed get colorScheme() {
        return Doc.ActiveDashboard?.colorScheme;
    }

    constructor(props: {}) {
        super(props);
        SettingsManager.Instance = this;
    }

    public close = action(() => (this.isOpen = false));
    public open = action(() => (this.isOpen = true));

    private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
    private changePassword = async () => {
        if (!(this.curr_password && this.new_password && this.new_confirm)) {
            runInAction(() => (this.passwordResultText = "Error: Hey, we're missing some fields!"));
        } else {
            const passwordBundle = { curr_pass: this.curr_password, new_pass: this.new_password, new_confirm: this.new_confirm };
            const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
            runInAction(() => (this.passwordResultText = error ? 'Error: ' + error[0].msg + '...' : 'Password successfully updated!'));
        }
    };

    @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice'));
    @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined));
    @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font));
    @undoBatch changeFontSize = action((val: number) => (Doc.UserDoc().fontSize = val));
    @undoBatch switchActiveBackgroundColor = action((color: string) => (Doc.UserDoc().activeCollectionBackground = color));
    @undoBatch switchUserColor = action((color: string) => {
        Doc.SharingDoc().userColor = undefined;
        Doc.GetProto(Doc.SharingDoc()).userColor = color;
    });
    @undoBatch playgroundModeToggle = action(() => {
        this.playgroundMode = !this.playgroundMode;
        if (this.playgroundMode) {
            DocServer.Control.makeReadOnly();
            addStyleSheetRule(SettingsManager._settingsStyle, 'topbar-inner-container', { background: 'red !important' });
        } else Doc.CurrentUserEmail !== 'guest' && DocServer.Control.makeEditable();
    });

    @undoBatch
    @action
    changeColorScheme = action((scheme: string) => {
        const activeDashboard = Doc.ActiveDashboard;
        if (!activeDashboard) return;
        switch (scheme) {
            case ColorScheme.Light:
                activeDashboard.colorScheme = ColorScheme.Light
                addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: '#d3d3d3 !important' });
                break;
            case ColorScheme.Dark:
                activeDashboard.colorScheme = ColorScheme.Dark;
                addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: 'black !important' });
                break;
            case ColorScheme.System:
            default:
                activeDashboard.colorScheme = ColorScheme.System;
                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                    activeDashboard.colorScheme = e.matches ? ColorScheme.Dark : ColorScheme.Light; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
                });
                break;
        }
    });

    @computed get colorsContent() {


        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.System];
        const schemeMap = ['Light', 'Dark', 'Match System'];

        return (
            <div className="colors-content">
                <ColorPicker formLabel='Background Color' icon={<FaFillDrip/>} selectedColor={StrCast(Doc.UserDoc().activeCollectionBackground)} setSelectedColor={this.switchActiveBackgroundColor}/>
                <ColorPicker formLabel='User Color' icon={<FaPalette/>} selectedColor={StrCast(Doc.SharingDoc().userColor)} setSelectedColor={this.switchUserColor}/>
                <Dropdown 
                    formLabel='Theme'
                    size={Size.SMALL}
                    type={Type.TERT}
                    selectedVal={StrCast(Doc.ActiveDashboard?.colorScheme)}
                    setSelectedVal={(scheme) => this.changeColorScheme(scheme as string)}
                    items={colorSchemes.map((scheme, i) => (
                        {
                            text: schemeMap[i],
                            val: scheme
                        }
                    ))} 
                    dropdownType={DropdownType.SELECT}
                    color={StrCast(Doc.SharingDoc().userColor)}
                />
            </div>
        );
    }

    @computed get formatsContent() {
        return (
            <div className="prefs-content">
                <Toggle 
                    formLabel={'Show document header'} 
                    formLabelPlacement={'right'} 
                    toggleType={ToggleType.SWITCH} 
                    onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')} 
                    toggleStatus={Doc.UserDoc().layout_showTitle !== undefined} size={Size.XSMALL}
                    color={StrCast(Doc.SharingDoc().userColor)}

                />
                <Toggle 
                    formLabel={'Show Full Toolbar'} 
                    formLabelPlacement={'right'} 
                    toggleType={ToggleType.SWITCH} 
                    onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} 
                    toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} 
                    size={Size.XSMALL}
                    color={StrCast(Doc.SharingDoc().userColor)}

                />
                <Toggle 
                    formLabel={'Show Button Labels'} 
                    formLabelPlacement={'right'} 
                    toggleType={ToggleType.SWITCH} 
                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} 
                    toggleStatus={FontIconBox.GetShowLabels()} 
                    size={Size.XSMALL}
                    color={StrCast(Doc.SharingDoc().userColor)}

                />
                <Toggle 
                    formLabel={'Recognize Ink Gestures'} 
                    formLabelPlacement={'right'} 
                    toggleType={ToggleType.SWITCH} 
                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())} 
                    toggleStatus={FontIconBox.GetRecognizeGestures()} 
                    size={Size.XSMALL}
                    color={StrCast(Doc.SharingDoc().userColor)}

                />
                <Toggle 
                    formLabel={'Hide Labels In Ink Shapes'} 
                    formLabelPlacement={'right'} 
                    toggleType={ToggleType.SWITCH} 
                    onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)} 
                    toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} 
                    size={Size.XSMALL}
                    color={StrCast(Doc.SharingDoc().userColor)}

                />
                <Toggle 
                    formLabel={'Open Ink Docs in Lightbox'} 
                    formLabelPlacement={'right'} 
                    toggleType={ToggleType.SWITCH} 
                    onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)} 
                    toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)} 
                    size={Size.XSMALL}
                    color={StrCast(Doc.SharingDoc().userColor)}

                />
            </div>
        );
    }

    @computed get appearanceContent() {
        return (
            <div className="tab-content appearances-content">
                <div className="tab-column">
                    <div className="tab-column-title">Colors</div>
                    <div className="tab-column-content">{this.colorsContent}</div>
                </div>
                <div className="tab-column">
                    <div className="tab-column-title">Formats</div>
                    <div className="tab-column-content">{this.formatsContent}</div>
                </div>
            </div>
        );
    }

    @computed get textContent() {
        const fontFamilies = ['Times New Roman', 'Arial', 'Georgia', 'Comic Sans MS', 'Tahoma', 'Impact', 'Crimson Text', 'Roboto'];
        const fontSizes = ['7px', '8px', '9px', '10px', '12px', '14px', '16px', '18px', '20px', '24px', '32px', '48px', '72px'];

        return (
            <div className="tab-content appearances-content">
                <div className="tab-column">
                    <div className="tab-column-title">Text</div>
                    <div className="tab-column-content">
                        {/* <NumberInput/> */}
                        <Group formLabel={'Default Font'}>
                            <Dropdown 
                                items={fontFamilies.map((val) => {
                                    return {
                                        text: val,
                                        val: val,
                                        style: {
                                            fontFamily: val
                                        }
                                    }
                                })} 
                                dropdownType={DropdownType.SELECT}
                                type={Type.TERT}
                                selectedVal={StrCast(Doc.UserDoc().fontFamily)}
                                setSelectedVal={(val) => {this.changeFontFamily(val as string)}}
                                color={StrCast(Doc.SharingDoc().userColor)}
                            />
                        </Group>
                    </div>
                </div>
            </div>
        );
    }

    @action
    changeVal = (e: React.ChangeEvent, pass: string) => {
        const value = (e.target as any).value;
        switch (pass) {
            case 'curr':
                this.curr_password = value;
                break;
            case 'new':
                this.new_password = value;
                break;
            case 'conf':
                this.new_confirm = value;
                break;
        }
    };

    @computed get passwordContent() {
        return (
            <div className="password-content">
                <div className="password-content-inputs">
                    <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, 'curr')} />
                    <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, 'new')} />
                    <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, 'conf')} />
                </div>
                <div className="password-content-buttons">
                    {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
                    <Button type={Type.SEC} text={'Forgot Password'} color={StrCast(Doc.SharingDoc().userColor)}/>
                    <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={StrCast(Doc.SharingDoc().userColor)}/>
                </div>
            </div>
        );
    }

    @computed get accountOthersContent() {
        return (
            <div className="account-others-content">
                <Button type={Type.TERT} text={'Connect to Google'} iconPlacement='left' icon={<BsGoogle/>} onClick={() => this.googleAuthorize()}/>
            </div>
        );
    }

    @computed get accountsContent() {
        return (
            <div className="tab-content accounts-content">
                <div className="tab-column">
                    <div className="tab-column-title">Password</div>
                    <div className="tab-column-content">{this.passwordContent}</div>
                </div>
                <div className="tab-column">
                    <div className="tab-column-title">Others</div>
                    <div className="tab-column-content">{this.accountOthersContent}</div>
                </div>
            </div>
        );
    }

    setFreeformScrollMode = (mode: string) => {
        Doc.UserDoc().freeformScrollMode = mode;
    };

    @computed get modesContent() {
        return (
            <div className="tab-content modes-content">
                <div className="tab-column">
                    <div className="tab-column-title">Modes</div>
                    <div className="tab-column-content">
                        <Dropdown 
                            formLabel={"Mode"}
                            items={[
                                {
                                    text: 'Novice',
                                    description: 'Novice mode is a user-friendly setting designed to cater to those who are new to Dash',
                                    val: "Novice"
                                },
                                {
                                    text: 'Developer',
                                    description: 'Developer mode is an advanced setting that grants you greater control and access to the underlying mechanics and tools of a software or system. Developer mode is still under development as there are experimental features.',
                                    val: "Developer"
                                },
                            ]} 
                            selectedVal={Doc.noviceMode ? 'Novice' : 'Developer'}
                            setSelectedVal={(val) => {this.selectUserMode(val as string)}}
                            dropdownType={DropdownType.SELECT}
                            type={Type.TERT}
                            placement='bottom-start'
                            color={StrCast(Doc.SharingDoc().userColor)}
                        />
                        <Toggle 
                            formLabel={'Playground Mode'} 
                            toggleType={ToggleType.SWITCH} 
                            toggleStatus={this.playgroundMode} 
                            onClick={this.playgroundModeToggle}
                            color={StrCast(Doc.SharingDoc().userColor)}
                        />
                    </div>
                    <div className="tab-column-title" style={{ marginTop: 20, marginBottom: 10 }}>
                        Freeform Navigation
                    </div>
                    <div className="tab-column-content">
                        <Dropdown 
                            formLabel={"Scroll Mode"}
                            items={[
                                {
                                    text: 'Scroll to Pan',
                                    description: 'Scrolling pans canvas, shift + scrolling zooms',
                                    val: freeformScrollMode.Pan
                                },
                                {
                                    text: 'Scroll to Zoom',
                                    description: 'Scrolling zooms canvas',
                                    val: freeformScrollMode.Zoom
                                },
                            ]} 
                            selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)}
                            setSelectedVal={(val) => this.setFreeformScrollMode(val as string)}
                            dropdownType={DropdownType.SELECT}
                            type={Type.TERT}
                            placement='bottom-start'
                            color={StrCast(Doc.SharingDoc().userColor)}
                        />
                    </div>
                </div>
                <div className="tab-column">
                    <div className="tab-column-title">Permissions</div>
                    <div className="tab-column-content">
                        <Button
                            text={"Manage Groups"}
                            type={Type.TERT}
                            onClick={() => GroupManager.Instance?.open()}
                            color={StrCast(Doc.SharingDoc().userColor)}
                        />
                        <Toggle 
                            toggleType={ToggleType.SWITCH} 
                            formLabel={"Default access private"}
                            color={StrCast(Doc.SharingDoc().userColor)}
                            toggleStatus={BoolCast(Doc.defaultAclPrivate)} 
                            onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}/>
                    </div>
                </div>
            </div>
        );
    }

    private get settingsInterface() {
        // const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent },
        // { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }];

        const tabs = [
            { title: 'Accounts', ele: this.accountsContent },
            { title: 'Modes', ele: this.modesContent },
            { title: 'Appearance', ele: this.appearanceContent },
            { title: 'Text', ele: this.textContent },
        ];

        return (
            <div className="settings-interface">
                <div className="settings-panel">
                    <div className="settings-tabs">
                        {tabs.map(tab => (
                            <div key={tab.title} className={'tab-control ' + (this.activeTab === tab.title ? 'active' : 'inactive')} onClick={action(() => (this.activeTab = tab.title))}>
                                {tab.title}
                            </div>
                        ))}
                    </div>

                    <div className="settings-user">
                        <div className="settings-username">{Doc.CurrentUserEmail}</div>
                        <Button 
                            text={Doc.GuestDashboard ? 'Exit' : 'Log Out'}
                            type={Type.TERT}
                            onClick={() => window.location.assign(Utils.prepend('/logout'))}
                        />
                    </div>
                </div>

                            
                <div className="close-button">
                    <Button
                        icon={<FontAwesomeIcon icon={'times'} color="black" size={'lg'} />}
                        onClick={this.close}
                    />
                </div>

                <div className="settings-content">
                    {tabs.map(tab => (
                        <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
                            {tab.ele}
                        </div>
                    ))}
                </div>
            </div>
        );
    }

    render() {
        return (
            <MainViewModal
                contents={this.settingsInterface}
                isDisplayed={this.isOpen}
                interactive={true}
                closeOnExternalClick={this.close}
                dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
            />
        );
    }
}