import Colors, { ColorItem } from "@web-atoms/core/dist/core/Colors";
import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle";
import { AtomTabbedPageStyle } from "@web-atoms/core/dist/web/styles/AtomTabbedPageStyle";
import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration";
import CloseButtonHoverDataUrl from "@web-atoms/core/src/web/images/close-button-hover.svg";
import CloseButtonDataUrl from "@web-atoms/core/src/web/images/close-button.svg";

export default class AppHostStyle extends AtomStyle {

    public get root(): IStyleDeclaration {
        return {
            subclasses: {
                " .file-tab": this.fileTab,
                " .fill": this.fill,
                " .footer": this.footer,
                " .header": this.header
            }
        };
    }

    public get header(): IStyleDeclaration {
        return {
            subclasses: {
                " > a": {
                    margin: 0,
                    border: "none",
                    maxHeight: "40px"
                },
                " > a > img": {
                    margin: 0,
                    border: "none",
                    maxHeight: "40px"
                },
                " > a.fas": {
                    border: "none",
                    height: "40px",
                    width: "40px",
                    margin: 0,
                    padding: "5px"
                },
                " > a.fas:hover": {
                    border: "none",
                    height: "40px",
                    width: "40px",
                    margin: 0,
                    padding: "5px",
                    color: Colors.darkOrange
                },
                " > button": {
                    border: "none",
                    boxSizing: "border-box",
                    height: "40px",
                    width: "40px",
                    margin: 0,
                    padding: "5px"
                },
                " > button:hover": {
                    boxSizing: "border-box",
                    border: "none",
                    backgroundColor: Colors.darkOrange,
                    color: Colors.white
                }

            }
        };
    }

    public get footer(): IStyleDeclaration {
        return {
            subclasses: {
                " > div": {
                    minWidth: "100px",
                    display: "inline-block",
                    paddingLeft: "5px",
                    paddingRight: "5px"
                },
                " > .status": {
                },
                " > .position": {
                },
                " > .errors": {
                    color: Colors.red
                },
                " > .warnings": {
                    color: Colors.orange
                },
                " > * > i": {
                    marginRight: "4px"
                },
                " > .rating": {
                    position: "absolute",
                    right: "4px",
                },
                " > .issues": {
                    position: "absolute",
                    right: "100px",
                },
                " > .save": {
                    position: "absolute",
                    right: "200px",
                    subclasses: {
                        " > span": {
                            color: Colors.blue,
                            cursor: "pointer",
                            subclasses: {
                                ":hover": {
                                    textDecoration: "underline"
                                }
                            }
                        }
                    }
                }

            }
        };
    }

    public get fill(): IStyleDeclaration {
        return {
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            overflow: "hidden"
        };
    }

    public get fileTab(): IStyleDeclaration {
        return {
            display: "inline-block",
            position: "relative",
            whiteSpace: "nowrap",
            minWidth: "100px",
            padding: "5px",
            cursor: "default",
            subclasses: {
                ".selected": {
                    backgroundColor: Colors.blue,
                    color: Colors.white
                },
                " .icon": {
                    position: "absolute",
                    top: "8px",
                    left: "5px",
                    maxWidth: "16px",
                    maxHeight: "16px"
                },
                " .fas.fa-lock": {
                    display: "none",
                    position: "absolute",
                    left: "25px",
                    top: "10px",
                    fontSize: "smaller"
                },
                ".read-only": {
                    subclasses: {
                        " .fas.fa-lock": {
                            display: "inline-block"
                        },
                        " > div": {
                            marginLeft: "36px"
                        }
                    }
                },
                " .close-button": {
                    position: "absolute",
                    right: "5px",
                    top: "8px",
                    width: "0",
                    height: "0",
                    padding: "8px",
                    cursor: "pointer",
                    backgroundImage: CloseButtonDataUrl,
                    subclasses: {
                        ":hover": {
                            backgroundImage: CloseButtonHoverDataUrl,
                        }
                    }
                },
                " > div": {
                    marginLeft: "20px",
                    marginRight: "20px",
                    display: "inline-block"
                },

                ".dirty .close-button": {
                    borderRadius: "8px",
                    backgroundColor: Colors.red,
                    backgroundImage: "unset"
                },

            }
        };
    }

}