import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, runInAction } from 'mobx';
import { extname } from 'path';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
import { BoolCast, Cast, DocCast, ImageCast, NumCast, StrCast } from '../../fields/Types';
import { DashColor, emptyFunction, lightOrDark } from '../../Utils';
import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
import { DocFocusOrOpen } from '../util/DocumentManager';
import { ColorScheme } from '../util/SettingsManager';
import { undoBatch, UndoManager } from '../util/UndoManager';
import { TreeSort } from './collections/TreeView';
import { Colors } from './global/globalEnums';
import { InkingStroke } from './InkingStroke';
import { MainView } from './MainView';
import { DocumentViewProps } from './nodes/DocumentView';
import { FieldViewProps } from './nodes/FieldView';
import { SliderBox } from './nodes/SliderBox';
import './StyleProvider.scss';
import React = require('react');
import { Shadows } from 'browndash-components';

export enum StyleProp {
    TreeViewIcon = 'treeViewIcon',
    TreeViewSortings = 'treeViewSortings', // options for how to sort tree view items
    DocContents = 'docContents', // when specified, the JSX returned will replace the normal rendering of the document view
    Opacity = 'opacity', // opacity of the document view
    Hidden = 'hidden', // whether the document view should not be isplayed
    BoxShadow = 'boxShadow', // box shadow - used for making collections standout and for showing clusters in free form views
    BorderRounding = 'borderRounding', // border radius of the document view
    Color = 'color', // foreground color of Document view items
    BackgroundColor = 'backgroundColor', // background color of a document view
    WidgetColor = 'widgetColor', // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note
    HideLinkButton = 'hideLinkButton', // hides the blue-dot link button.  used when a document acts like a button
    LinkSource = 'linkSource', // source document of a link -- used by LinkAnchorBox
    PointerEvents = 'pointerEvents', // pointer events for DocumentView -- inherits pointer events if not specified
    Decorations = 'decorations', // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background
    HeaderMargin = 'headerMargin', // margin at top of documentview, typically for displaying a title -- doc contents will start below that
    TitleHeight = 'titleHeight', // Height of Title area
    ShowTitle = 'showTitle', // whether to display a title on a Document (optional :hover suffix)
    JitterRotation = 'jitterRotation', // whether documents should be randomly rotated
    BorderPath = 'customBorder', // border path for document view
    FontSize = 'fontSize', // size of text font
    FontFamily = 'fontFamily', // font family of text
    FontWeight = 'fontWeight', // font weight of text
    Highlighting = 'highlighting', // border highlighting
}

function darkScheme() {
    return Doc.ActiveDashboard?.colorScheme === ColorScheme.Dark;
}

function toggleLockedPosition(doc: Doc) {
    UndoManager.RunInBatch(
        () =>
            runInAction(() => {
                doc._lockedPosition = !doc._lockedPosition;
                doc._pointerEvents = doc._lockedPosition ? 'none' : undefined;
            }),
        'toggleBackground'
    );
}

export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps {
    return toBeDetermined?.isContentActive ? toBeDetermined : undefined;
}

export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) {
    return `M ${pw * 0.5} ${ph * inset}   C ${pw * 0.6} ${ph * inset} ${pw * (1 - 2 * inset)} 0 ${pw * (1 - inset)} ${ph * inset}   C ${pw} ${ph * (2 * inset)} ${pw * (1 - inset)} ${ph * 0.25} ${pw * (1 - inset)} ${ph * 0.3}   C ${
        pw * (1 - inset)
    } ${ph * 0.4} ${pw} ${ph * (1 - 2 * inset)} ${pw * (1 - inset)} ${ph * (1 - inset)}  C ${pw * (1 - 2 * inset)} ${ph} ${pw * 0.6} ${ph * (1 - inset)} ${pw * 0.5} ${ph * (1 - inset)}   C ${pw * 0.3} ${ph * (1 - inset)} ${pw * (2 * inset)} ${ph} ${
        pw * inset
    } ${ph * (1 - inset)}  C 0 ${ph * (1 - 2 * inset)} ${pw * inset} ${ph * 0.8} ${pw * inset} ${ph * 0.75}   C ${pw * inset} ${ph * 0.7} 0 ${ph * (2 * inset)} ${pw * inset} ${ph * inset}   C ${pw * (2 * inset)} 0 ${pw * 0.25} ${ph * inset} ${
        pw * 0.5
    } ${ph * inset}`;
}

// a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab
//
export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any {
    const remoteDocHeader = 'author;creationDate;noMargin';
    const docProps = testDocProps(props) ? props : undefined;
    const selected = property.includes(':selected');
    const isCaption = property.includes(':caption');
    const isAnchor = property.includes(':anchor');
    const isAnnotated = property.includes(':annotated');
    const isOpen = property.includes(':open');
    const fieldKey = props?.fieldKey ? props.fieldKey + '-' : isCaption ? 'caption-' : '';
    const isBackground = () => doc && BoolCast(doc._lockedPosition);
    const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor);
    const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity);
    const showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle);
    const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + (((Math.abs(x * y) * 9301 + 49297) % 233280) / 233280) * (max - min);
    switch (property.split(':')[0]) {
        case StyleProp.TreeViewIcon:
            const img = ImageCast(doc?.icon, ImageCast(doc?.data));
            if (img) {
                const ext = extname(img.url.href);
                const url = doc?.icon ? img.url.href : img.url.href.replace(ext, '_s' + ext);
                return <img src={url} width={20} height={15} style={{ margin: 'auto', display: 'block', objectFit: 'contain' }} />;
            }
            return Doc.toIcon(doc, isOpen);

        case StyleProp.TreeViewSortings:
            const allSorts: { [key: string]: { color: string; label: string } | undefined } = {};
            allSorts[TreeSort.Down] = { color: 'blue', label: '↓' };
            allSorts[TreeSort.Up] = { color: 'crimson', label: '↑' };
            if (doc?._viewType === CollectionViewType.Freeform) allSorts[TreeSort.Zindex] = { color: 'green', label: 'z' };
            allSorts[TreeSort.None] = { color: 'darkgray', label: '\u00A0\u00A0\u00A0' };
            return allSorts;
        case StyleProp.Highlighting:
            if (doc && !doc.noHighlighting) {
                const highlightIndex = Doc.isBrushedHighlightedDegree(doc);
                const highlightColor = ['transparent', 'rgb(68, 118, 247)', 'rgb(68, 118, 247)', 'orange', 'lightBlue'][highlightIndex];
                const highlightStyle = ['solid', 'dashed', 'solid', 'solid', 'solid'][highlightIndex];
                const excludeTypes = [DocumentType.FONTICON];
                let highlighting = !props?.disableDocBrushing && highlightIndex && !excludeTypes.includes(doc.type as any) && doc._viewType !== CollectionViewType.Linear; // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
                if (highlighting && props?.focus !== emptyFunction && StrCast(doc.title) !== '[pres element template]') {
                    return { highlightStyle, highlightColor, highlightIndex, highlightStroke: doc.type === DocumentType.INK };
                }
            }
            return undefined;
        case StyleProp.DocContents:
            return undefined;
        case StyleProp.WidgetColor:
            return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? 'lightgrey' : 'dimgrey';
        // return doc = dragManager.dragDocument ? props.dragEffects.opacity??CastofOpacityonline94 : Cast())
        // same idea for background Color
        case StyleProp.Opacity:
            return Cast(doc?._opacity, 'number', Cast(doc?.opacity, 'number', null));
        case StyleProp.HideLinkButton:
            return props?.hideLinkButton || (!selected && doc?.hideLinkButton);
        case StyleProp.FontSize:
            return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(doc?._fontSize, StrCast(Doc.UserDoc().fontSize)));
        case StyleProp.FontFamily:
            return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(doc?._fontFamily, StrCast(Doc.UserDoc().fontFamily)));
        case StyleProp.FontWeight:
            return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(doc?._fontWeight, StrCast(Doc.UserDoc().fontWeight)));
        case StyleProp.ShowTitle:
            return (
                (doc &&
                    !doc.presentationTargetDoc &&
                    props?.showTitle?.() !== '' &&
                    StrCast(
                        doc._showTitle,
                        props?.showTitle?.() ||
                            (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any)
                                ? doc.author === Doc.CurrentUserEmail
                                    ? StrCast(Doc.UserDoc().showTitle)
                                    : remoteDocHeader
                                : '')
                    )) ||
                ''
            );
        case StyleProp.Color:
            if (MainView.Instance.LastButton === doc) return Colors.DARK_GRAY;
            const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
            if (docColor) return docColor;
            const docView = props?.DocumentView?.();
            const backColor = backgroundCol() || docView?.props.styleProvider?.(docView.props.treeViewDoc, docView.props, 'backgroundColor');
            if (!backColor) return undefined;
            return lightOrDark(backColor);
        case StyleProp.Hidden:
            return BoolCast(doc?.hidden);
        case StyleProp.BorderRounding:
            return StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.borderRounding, doc?._viewType === CollectionViewType.Pile ? '50%' : ''));
        case StyleProp.TitleHeight:
            return 15;
        case StyleProp.BorderPath:
            return Doc.IsComicStyle(doc) && props?.renderDepth && doc?.type !== DocumentType.INK
                ? { path: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0), fill: wavyBorderPath(props?.PanelWidth?.() || 0, props?.PanelHeight?.() || 0, 0.08), width: 3 }
                : { path: undefined, width: 0 };
        case StyleProp.JitterRotation:
            return Doc.IsComicStyle(doc) ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
        case StyleProp.HeaderMargin:
            return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) ||
                (doc?.type === DocumentType.RTF && !showTitle()?.includes('noMargin')) ||
                doc?.type === DocumentType.LABEL) &&
                showTitle() &&
                !StrCast(doc?.showTitle).includes(':hover')
                ? 15
                : 0;
        case StyleProp.BackgroundColor: {
            if (MainView.Instance.LastButton === doc) return Colors.LIGHT_GRAY;
            let docColor: Opt<string> = StrCast(doc?.[fieldKey + 'backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : ''));
            switch (doc?.type) {
                case DocumentType.PRESELEMENT:
                    docColor = docColor || (darkScheme() ? '' : '');
                    break;
                case DocumentType.PRES:
                    docColor = docColor || (darkScheme() ? 'transparent' : 'transparent');
                    break;
                case DocumentType.FONTICON:
                    docColor = docColor || Colors.DARK_GRAY;
                    break;
                case DocumentType.RTF:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
                    break;
                case DocumentType.FILTER:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : 'rgba(105, 105, 105, 0.432)');
                    break;
                case DocumentType.INK:
                    docColor = doc?.isInkMask ? 'rgba(0,0,0,0.7)' : undefined;
                    break;
                case DocumentType.SLIDER:
                    break;
                case DocumentType.EQUATION:
                    docColor = docColor || 'transparent';
                    break;
                case DocumentType.LABEL:
                    docColor = docColor || (doc.annotationOn !== undefined ? 'rgba(128, 128, 128, 0.18)' : undefined) || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
                    break;
                case DocumentType.BUTTON:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
                    break;
                case DocumentType.LINKANCHOR:
                    docColor = isAnchor ? Colors.LIGHT_BLUE : 'transparent';
                    break;
                case DocumentType.LINK:
                    docColor = (isAnchor ? docColor : '') || 'transparent';
                    break;
                case DocumentType.IMG:
                case DocumentType.WEB:
                case DocumentType.PDF:
                case DocumentType.MAP:
                case DocumentType.SCREENSHOT:
                case DocumentType.VID:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
                    break;
                case DocumentType.COL:
                    if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
                    docColor =
                        docColor ||
                        (doc?._viewType === CollectionViewType.Pile || Doc.IsSystem(doc)
                            ? darkScheme()
                                ? Colors.DARK_GRAY
                                : Colors.LIGHT_GRAY // system docs (seen in treeView) get a grayish background
                            : doc.annotationOn
                            ? '#00000010' // faint interior for collections on PDFs, images, etc
                            : doc?._isGroup
                            ? undefined
                            : Cast((props?.renderDepth || 0) > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground, 'string') ?? (darkScheme() ? Colors.BLACK : 'linear-gradient(#065fff, #85c1f9)'));
                    break;
                //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
                default:
                    docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE);
                    break;
            }
            if (docColor && !doc) docColor = DashColor(docColor).fade(0.5).toString();
            return docColor;
        }
        case StyleProp.BoxShadow: {
            if (!doc || opacity() === 0 || doc.noShadow) return undefined; // if it's not visible, then no shadow)
            if (doc.boxShadow === 'standard') return Shadows.STANDARD_SHADOW;
            if (doc?.isLinkButton && DocListCast(doc?.links).length && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, 'lightblue 0em 0em 1em');
            switch (doc?.type) {
                case DocumentType.COL:
                    return StrCast(
                        doc?.boxShadow,
                        doc?._viewType === CollectionViewType.Pile
                            ? '4px 4px 10px 2px'
                            : isBackground() || doc?._isGroup || docProps?.LayoutTemplateString
                            ? undefined // groups have no drop shadow -- they're supposed to be "invisible".  LayoutString's imply collection is being rendered as something else (e.g., title of a Slide)
                            : `${darkScheme() ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY} ${StrCast(doc.boxShadow, '0.2vw 0.2vw 0.8vw')}`
                    );

                case DocumentType.LABEL:
                    if (doc?.annotationOn !== undefined) return 'black 2px 2px 1px';
                default:
                    return doc.z
                        ? `#9c9396  ${StrCast(doc?.boxShadow, '10px 10px 0.9vw')}` // if it's a floating doc, give it a big shadow
                        : props?.ContainingCollectionDoc?._useClusters
                        ? `${backgroundCol()} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
                        : NumCast(doc.group, -1) !== -1
                        ? `gray ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
                        : isBackground()
                        ? undefined // if it's a background & has a cluster color, make the shadow spread really big
                        : StrCast(doc.boxShadow, '');
            }
        }
        case StyleProp.PointerEvents:
            if (MainView.Instance._exploreMode) return 'all';
            if (doc?.pointerEvents) return StrCast(doc.pointerEvents);
            if (props?.pointerEvents?.() === 'none') return 'none';
            const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name);
            if (opacity() === 0 || (isInk && !docProps?.treeViewDoc) || doc?.isInkMask) return 'none';
            if (!isInk) return props?.isDocumentActive?.() ? 'all' : undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active
            return undefined;
        case StyleProp.Decorations:
            if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform || doc?.x !== undefined || doc?.y !== undefined) {
                return doc && doc.pointerEvents === 'none' && isBackground() && !Doc.IsSystem(doc) && (props?.renderDepth || 0) > 0 ? (
                    <div className="styleProvider-lock" onClick={() => toggleLockedPosition(doc)}>
                        <FontAwesomeIcon icon={isBackground() ? 'lock' : 'unlock'} style={{ color: isBackground() ? 'red' : undefined }} size="lg" />
                    </div>
                ) : null;
            }
    }
}

export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
    return (
        <div
            title={field}
            className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`}
            onClick={undoBatch(
                action((e: React.MouseEvent) => {
                    e.stopPropagation();
                    clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
                })
            )}>
            <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" />
        </div>
    );
}
/**
 * add lock and hide button decorations for the "Dashboards" flyout TreeView
 */
export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
    if (doc && property.split(':')[0] === StyleProp.Decorations) {
        return doc._viewType === CollectionViewType.Docking ? null : (
            <>
                {DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => {
                    doc.hidden = doc.hidden ? undefined : true;
                    if (!doc.hidden) {
                        DocFocusOrOpen(doc, props?.ContainingCollectionDoc);
                    }
                })}
            </>
        );
    }
    return DefaultStyleProvider(doc, props, property);
}