import Colors from "@web-atoms/core/dist/core/Colors";
import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle";
import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration";

export default class MessageListStyle extends AtomStyle {

    public get root(): IStyleDeclaration {
        return {
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            overflow: "hidden",
            subclasses: {
                " .atom-toggle-button-bar": this.toggleButtonBar,
                " .atom-list-box": this.listBox,
                " .files": this.files,
                " .header": {
                    position: "absolute",
                    left: 0,
                    top: 0,
                    maxHeight: "28px",
                    marginTop: "-5px",
                    overflow: "hidden"
                },
                " .body": {
                    position: "absolute",
                    left: 0,
                    top: "28px",
                    bottom: 0,
                    right: 0,
                    overflow: "auto"
                }
            }
        };
    }

    public get toggleButtonBar() {
        return {};
    }

    public get listBox() {
        return {
        };
    }

    public get files(): IStyleDeclaration {
        return {
            subclasses: {
            " .file": this.file
           }
        };
    }

    public get file(): IStyleDeclaration {
        return {
            subclasses: {
                " .messages": {
                    paddingLeft: "25px",
                    subclasses: {
                        " .item": {
                            cursor: "pointer"
                        },
                        " .item:hover": {
                            backgroundColor: Colors.lightGray,
                        },
                        " .error": {
                            color: Colors.red
                        },
                        " .warning": {
                            color: Colors.paleGreen
                        },
                        " .message": {
                            color: Colors.darkGray
                        },
                        " .suggestion": {
                            color: Colors.orange
                        }
                    }
                }
            }
        };
    }

}