module DiagramStyle

open ModelType
open CommonTypes
open Fable.React.Props
open Browser.Dom

module Constants =
    let dividerBarWidth = 10

let headerHeight = "72px"
let private headerHeightWithBorderOffset = "74px"
/// Small right section.
let private rightSectionWidthS = "400px"
/// Large right section.
let private rightSectionWidthL = "650px"
let minViewerWidth = 400
let minEditorWidth() = int ((document.getElementById "WholeApp").offsetWidth * 0.25)

let rightSectionWidthViewerDefault = 650

let getHeaderHeight =
    headerHeight
    |> String.filter (fun c -> (int(c) <= 57 && int(c) >= 48))
    |> float
    
let rightSectionWidth (model:Model) =
    match model.RightPaneTabVisible with
    | RightTab.Simulation -> 
        match model.SimSubTabVisible with
        | SimSubTab.DCsim | SimSubTab.ACsim | SimSubTab.TimeSim -> rightSectionWidthS
    |_  -> rightSectionWidthS

let leftSectionWidth model = Style [
    Width (sprintf "calc(100%s - %s - 10px)" "%" (rightSectionWidth model))
]

let navbarStyle model = Style [
    Width "100%"
    Height headerHeight
]

/// For making Sheet contained inside left section (don't want sheet behind right section tabs) NOT USED
let leftSectionStyle model =
    let leftSectionWidth = leftSectionWidth model
    Style [
        Position PositionOptions.Fixed
        Left "0px"
        Top "0px"
        Height  "100%" //(sprintf "calc(100%s - %s)" "%" headerHeight) // WindowSize - headerHeight
        Width leftSectionWidth
        OverflowX OverflowOptions.Hidden
        OverflowY OverflowOptions.Hidden
        BorderTop "2px solid lightgray"
        UserSelect UserSelectOptions.None
        ZIndex 31
        BackgroundColor "white"
        //UserSelect UserSelectOptions.None
]

let rightSectionStyle model = 
    let widthRightSec = rightSectionWidth model
    Style [
        Position PositionOptions.Fixed
        Right "0px"
        Top ((string (getHeaderHeight+3.)) + "px" )
        Height  "100%" //(sprintf "calc(100%s - %s)" "%" headerHeight) // WindowSize - headerHeight
        Width widthRightSec
        OverflowX OverflowOptions.Visible
        //OverflowY OverflowOptions.Auto
        BorderTop "1px solid lightgray"
        UserSelect UserSelectOptions.None
        ZIndex 31
        BackgroundColor "white"
        //UserSelect UserSelectOptions.None
    ]

let bottomSectionStyle model = 
    let height = "40%"
    Style [
        Position PositionOptions.Fixed
        Bottom "0px"
        //Top ((string (getHeaderHeight+3.)) + "px" )
        Height  height //(sprintf "calc(100%s - %s)" "%" headerHeight) // WindowSize - headerHeight
        Width "100%"
        OverflowY OverflowOptions.Visible
        //OverflowY OverflowOptions.Auto
        BorderTop "1px solid lightgray"
        UserSelect UserSelectOptions.None
        ZIndex 31
        BackgroundColor "white"
        //UserSelect UserSelectOptions.None
    ]

let belowHeaderStyle headerSize =
    Style [
        OverflowY OverflowOptions.Auto
        Height $"calc(100%% - {headerSize})"
        ]

let canvasVisibleStyle model = 
    let widthRightSec = rightSectionWidth model
    Style [
        Display DisplayOptions.Block
        Position PositionOptions.Absolute // Required to work.
        OverflowX OverflowOptions.Scroll
        OverflowY OverflowOptions.Scroll
        Top headerHeight // Placed just under the header.
        Left "0px"
        Bottom "0px"
        Right widthRightSec
        BorderTop "2px solid lightgray"
    ]
    
// Used by Sheet
let canvasVisibleStyleList model = 
    let background =
        match model.Sheet.Wire.Symbol.Theme with
        |DrawModelType.SymbolT.ThemeType.White -> BackgroundColor "white"
        |DrawModelType.SymbolT.ThemeType.Light -> BackgroundColor "rgba(255,255,0,0.1)"  //light yellow
        |DrawModelType.SymbolT.ThemeType.Colourful -> BackgroundColor "rgba(0,0,0,0.05)" //light gray
    
    let widthRightSec = rightSectionWidth model
    [
        Display DisplayOptions.Block
        Position PositionOptions.Absolute // Required to work.
        OverflowX OverflowOptions.Scroll
        OverflowY OverflowOptions.Scroll
        Top headerHeight // Placed under header with offset for the border. // headerHeight // Placed just under the header.
        Left "0px"
        Bottom "0px"
        Right widthRightSec
        BorderTop "2px solid lightgray"
        background
    ]

let canvasSmallMenuStyle = Style [
    Display DisplayOptions.Block
    Position PositionOptions.Absolute // Required to work.
    OverflowX OverflowOptions.Hidden
    OverflowY OverflowOptions.Hidden
    Left "10px"
    Bottom "25px"
    Right (sprintf "calc(100%s - 300px)" "%")
    WhiteSpace WhiteSpaceOptions.Nowrap
]

let canvasSmallButtonStyle = Style [
    MarginRight "5px"
    BackgroundColor "white"
    BorderRadius "4px"
    BorderStyle "solid"
    Outline "none"
    Padding "4px"
    Opacity 0.7
]

let notificationStyle = Style [
    ZIndex 100 // In front of everything.
    Position PositionOptions.Absolute
    UserSelect UserSelectOptions.None
    Right "20px"
    Bottom "20px"
]

let simulationNumberStyle = Style [
    Width "320px"
    Height "30px"
]

let constraintNumberStyle = Style [
    Width "200px"
    Height "30px"
]

let simulationBitStyle = Style [
    Width "100px"
    Height "30px"
    PaddingTop "3px"
]

let menuLabelStyle = Style [
    Outline "none"
    MarginTop "10px"
    MarginBottom "10px"
    Color "#7a7a7a"
    FontSize "0.80em"
    LetterSpacing "0.1em"
    TextTransform "uppercase"
]

let sortArrowStyle = Style [
    Margin "0"
    Display DisplayOptions.Block
    Width "100%"
    Height "50%"
    Padding "0 0 0 0"
    Top "0"
    FontSize "50%"
    Position PositionOptions.Relative
    BorderColor "white"
]

let colMoveArrowStyle = Style [
    Margin "0"
    Display DisplayOptions.Block
    Width "100%"
    Height "50%"
    Padding "0 0 0 0"
    Top "0"
    FontSize "80%"
    Position PositionOptions.Relative
    BorderColor "white"
]

let ttGridColumnProps index = [
    Border "1px solid gray"
    Padding "7px"
    FontSize "18px"
    TextAlign TextAlignOptions.Left
    GridColumnStart <| string (index+1)
    GridColumnEnd <| string (index+2)
    OverflowX OverflowOptions.Auto
    OverflowWrap "break-word"
]

let ttGridHiddenColumnProps gridWidth= [
    GridColumnStart (string <| gridWidth + 1)
    GridColumnEnd (string <| gridWidth + 2)
    Width 0
    OverflowX OverflowOptions.Hidden
    Visibility "hidden"
]

let ttGridContainerStyle model = 
    let widthRightSec = rightSectionWidth model
    Style [
        Display DisplayOptions.Grid
        GridAutoFlow "column"
    ]