{-# OPTIONS_GHC -Wno-missing-role-annotations #-}
{-# OPTIONS_GHC -Wno-term-variable-capture #-}

module Dashi.Components.Tabs where

import Clay hiding (label, name, selected, span_, type_)
import Dashi.Components.Util (ariaCurrent_, ariaRole_)
import Dashi.Prelude hiding (none, (&))
import Dashi.Style.Border (BorderColour (BorderColour, BorderFocusedColour))
import Dashi.Style.Pseudo (pressable)
import Dashi.Style.Text (TextColour (TextColour))
import Dashi.Style.Tokens
import Dashi.Style.Util
import Miso.Html.Element (li_, ul_)
import Miso.Html.Event (onClick)
import Miso.Html.Property (class_, tabindex_)

data Tabs t model action = Tabs
    { forall t model action. Tabs t model action -> [t]
tabs :: [t]
    , forall t model action.
Tabs t model action -> t -> [View model action]
label :: t -> [View model action]
    , forall t model action. Tabs t model action -> t -> Bool
selected :: t -> Bool
    , forall t model action. Tabs t model action -> t -> action
onSelect :: t -> action
    }

instance Widget (Tabs t model action) model action where
    widget' :: [Attribute action] -> Tabs t model action -> View model action
widget' [Attribute action]
attrs Tabs{[t]
t -> action
t -> Bool
t -> [View model action]
tabs :: forall t model action. Tabs t model action -> [t]
label :: forall t model action.
Tabs t model action -> t -> [View model action]
selected :: forall t model action. Tabs t model action -> t -> Bool
onSelect :: forall t model action. Tabs t model action -> t -> action
tabs :: [t]
label :: t -> [View model action]
selected :: t -> Bool
onSelect :: t -> action
..} =
        [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
ul_
            (MisoString -> Attribute action
forall action. MisoString -> Attribute action
class_ MisoString
"tabs" Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
ariaRole_ MisoString
"group" Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs)
            [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
li_
                (MisoString -> Attribute action
forall action. MisoString -> Attribute action
tabindex_ MisoString
"0" Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: action -> Attribute action
forall action. action -> Attribute action
onClick (t -> action
onSelect t
tab) Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Bool -> Attribute action
forall action. Bool -> Attribute action
ariaCurrent_ Bool
True | t -> Bool
selected t
tab])
                ([View model action] -> View model action)
-> (t -> [View model action]) -> t -> View model action
forall b c a. (b -> c) -> (a -> b) -> a -> c
forall {k} (cat :: k -> k -> *) (b :: k) (c :: k) (a :: k).
Category cat =>
cat b c -> cat a b -> cat a c
. t -> [View model action]
label
                (t -> View model action) -> t -> View model action
forall a b. (a -> b) -> a -> b
$ t
tab
            | t
tab <- [t]
tabs
            ]
    style :: Css
style =
        Selector
".tabs" Selector -> Css -> Css
? do
            Display -> Css
display Display
flex
            FlexDirection -> Css
flexDirection FlexDirection
row
            ListStyleType -> Css
listStyleType ListStyleType
forall a. None a => a
none
            Size LengthUnit -> Stroke -> Color -> Css
borderBottom (Number -> Size LengthUnit
em Number
0.1) Stroke
solid (BorderColour -> Color
forall t. Token t => t -> Color
colorToken BorderColour
BorderColour)
            Selector
li Selector -> Css -> Css
? do
                Css
pressable
                SizeToken -> SizeToken -> Css
paddingYX' SizeToken
XSmall SizeToken
Small
                FontWeight -> Css
fontWeight (FontWeight -> Css) -> FontWeight -> Css
forall a b. (a -> b) -> a -> b
$ Integer -> FontWeight
weight Integer
500
                Position -> Css
position Position
relative
                TextColour -> Css
forall t. Token t => t -> Css
color' (TextColour -> Css) -> TextColour -> Css
forall a b. (a -> b) -> a -> b
$ Appearance -> TextColour
TextColour Appearance
Subtle
                Refinement
after Refinement -> Css -> Css
& do
                    Content -> Css
content (Content -> Css) -> Content -> Css
forall a b. (a -> b) -> a -> b
$ MisoString -> Content
stringContent MisoString
""
                    Display -> Css
display Display
block
                    Position -> Css
position Position
absolute
                    Size (ZonkAny 1) -> Css
forall a. Size a -> Css
left Size (ZonkAny 1)
forall a. Size a
nil
                    Size (ZonkAny 0) -> Css
forall a. Size a -> Css
right Size (ZonkAny 0)
forall a. Size a
nil
                    Size LengthUnit -> Css
forall a. Size a -> Css
bottom (Size LengthUnit -> Css)
-> (Number -> Size LengthUnit) -> Number -> Css
forall b c a. (b -> c) -> (a -> b) -> a -> c
forall {k} (cat :: k -> k -> *) (b :: k) (c :: k) (a :: k).
Category cat =>
cat b c -> cat a b -> cat a c
. Number -> Size LengthUnit
em (Number -> Css) -> Number -> Css
forall a b. (a -> b) -> a -> b
$ -Number
0.2
                    Size LengthUnit -> Stroke -> Color -> Css
borderBottom (Number -> Size LengthUnit
em Number
0.3) Stroke
solid Color
transparent
                Bool -> Refinement
ariaCurrent Bool
True Refinement -> Css -> Css
& do
                    TextColour -> Css
forall t. Token t => t -> Css
color' (TextColour -> Css) -> TextColour -> Css
forall a b. (a -> b) -> a -> b
$ Appearance -> TextColour
TextColour Appearance
Primary
                    Refinement
after Refinement -> Css -> Css
& Color -> Css
borderBottomColor (BorderColour -> Color
forall t. Token t => t -> Color
colorToken BorderColour
BorderFocusedColour)
                Refinement
hover Refinement -> Refinement -> Refinement
forall a. Semigroup a => a -> a -> a
<> forall a. Not a => a -> Refinement
Clay.not @Refinement Refinement
"@aria-current" Refinement -> Css -> Css
& do
                    Color -> Css
borderBottomColor (Color -> Css) -> Color -> Css
forall a b. (a -> b) -> a -> b
$ BorderColour -> Color
forall t. Token t => t -> Color
colorToken BorderColour
BorderColour
                    Refinement
after Refinement -> Css -> Css
& Color -> Css
borderBottomColor (BorderColour -> Color
forall t. Token t => t -> Color
colorToken BorderColour
BorderColour)
                pure ()