module FF.HTML.Spec.Safe.StyleSheet.Examples where

open import Agda.Builtin.String using (String)
open import Cubical.Data.List.Base using (List; []; _∷_)

import FF.CSS.Spec.Safe.Syntax as CSS
import FF.HTML.Spec.Safe as HTML
import FF.HTML.Spec.Safe.Selector.Examples as SelectorExamples
import FF.HTML.Spec.Safe.StyleSheet as StyleSheet

mainSectionRule : StyleSheet.RuleT
mainSectionRule =
  StyleSheet.rule SelectorExamples.sectionByTypedId
    ( CSS.display (CSS.displayOutsideInside CSS.outsideBlock CSS.insideFlowRoot)
    ∷ CSS.padding (CSS.oneSide (CSS.lp (CSS.remLength "2")))
    ∷ CSS.background-color (CSS.hex (CSS.hexColor "#f7f2ff"))
    ∷ []
    )

navLinkRule : StyleSheet.RuleT
navLinkRule =
  StyleSheet.rule SelectorExamples.linksUnderNav
    ( CSS.color (CSS.named CSS.rebeccapurple)
    ∷ CSS.font-size (CSS.lp (CSS.remLength "1.125"))
    ∷ []
    )

readyParagraphRule : StyleSheet.RuleT
readyParagraphRule =
  StyleSheet.rule SelectorExamples.readyParagraph
    ( CSS.color (CSS.named CSS.green)
    ∷ CSS.text-align CSS.textStart
    ∷ []
    )

emptyParagraphRule : StyleSheet.RuleT
emptyParagraphRule =
  StyleSheet.rule SelectorExamples.emptyParagraph
    ( CSS.display (CSS.displayBox CSS.displayNone)
    ∷ []
    )

sampleStyleSheet : StyleSheet.StyleSheetT
sampleStyleSheet =
  StyleSheet.sheet
    ( mainSectionRule
    ∷ navLinkRule
    ∷ readyParagraphRule
    ∷ emptyParagraphRule
    ∷ []
    )

renderedSampleStyleSheet : String
renderedSampleStyleSheet = StyleSheet.render sampleStyleSheet

sampleStyleElement : HTML.HtmlT
sampleStyleElement = StyleSheet.styleElement sampleStyleSheet

matchedSampleRules : List StyleSheet.MatchedRuleT
matchedSampleRules =
  StyleSheet.matchingRules
    sampleStyleSheet
    SelectorExamples.samplePage

styledSampleElements : List StyleSheet.ElementStyleT
styledSampleElements =
  StyleSheet.styledElements
    sampleStyleSheet
    SelectorExamples.samplePage