-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.ThemeSwitcher
  ( -- ** Props
    ThemeSwitcherProps (..)
  , defaultThemeSwitcherProps
    -- ** Views
  , themeSelect_
  , darkModeToggle_
    -- ** Samples
  , themeSwitcherCodeSample
  , themeSwitcherPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Event as E
import qualified Miso.Html.Property as P
import qualified Miso.Svg           as S
import qualified Miso.Svg.Property  as SP
-----------------------------------------------------------------------------
import           Miso.UI.Icons
-----------------------------------------------------------------------------
-- | Props for 'themeSelect_'
data ThemeSwitcherProps action
  = ThemeSwitcherProps
  { forall action.
ThemeSwitcherProps action -> [(MisoString, MisoString)]
themeSwitcherThemes :: [(MisoString, MisoString)]
    -- ^ (value, label) pairs
  , forall action. ThemeSwitcherProps action -> MisoString
themeSwitcherSelected :: MisoString
    -- ^ value of the currently selected theme
  , forall action. ThemeSwitcherProps action -> [MisoString]
themeSwitcherClasses :: [MisoString]
    -- ^ Extra classes for the @select@
  , forall action. ThemeSwitcherProps action -> [Attribute action]
themeSwitcherAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: basecoat's stock themes
defaultThemeSwitcherProps :: ThemeSwitcherProps action
defaultThemeSwitcherProps :: forall action. ThemeSwitcherProps action
defaultThemeSwitcherProps
  = ThemeSwitcherProps
  { themeSwitcherThemes :: [(MisoString, MisoString)]
themeSwitcherThemes =
    [ (MisoString
"", MisoString
"Default")
    , (MisoString
"claude", MisoString
"Claude")
    , (MisoString
"cosmic", MisoString
"Cosmic")
    , (MisoString
"tangerine", MisoString
"Tangerine")
    , (MisoString
"supabase", MisoString
"Supabase")
    ]
  , themeSwitcherSelected :: MisoString
themeSwitcherSelected = MisoString
""
  , themeSwitcherClasses :: [MisoString]
themeSwitcherClasses = [ MisoString
"h-8", MisoString
"leading-none" ]
  , themeSwitcherAttrs :: [Attribute action]
themeSwitcherAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/theme-switcher/ Theme Switcher>:
-- select that emits the chosen theme name
themeSelect_
  :: (MisoString -> action)
  -> ThemeSwitcherProps action
  -> View model action
themeSelect_ :: forall action model.
(MisoString -> action)
-> ThemeSwitcherProps action -> View model action
themeSelect_ MisoString -> action
changeTheme ThemeSwitcherProps {[(MisoString, MisoString)]
[MisoString]
[Attribute action]
MisoString
themeSwitcherThemes :: forall action.
ThemeSwitcherProps action -> [(MisoString, MisoString)]
themeSwitcherSelected :: forall action. ThemeSwitcherProps action -> MisoString
themeSwitcherClasses :: forall action. ThemeSwitcherProps action -> [MisoString]
themeSwitcherAttrs :: forall action. ThemeSwitcherProps action -> [Attribute action]
themeSwitcherThemes :: [(MisoString, MisoString)]
themeSwitcherSelected :: MisoString
themeSwitcherClasses :: [MisoString]
themeSwitcherAttrs :: [Attribute action]
..} =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.select_
    ( [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"select" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
themeSwitcherClasses)
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: (MisoString -> action) -> Attribute action
forall action. (MisoString -> action) -> Attribute action
E.onChange MisoString -> action
changeTheme
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
themeSwitcherAttrs
    )
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.option_
      ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.value_ MisoString
value
      Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [ Bool -> Attribute action
forall action. Bool -> Attribute action
P.selected_ Bool
True | MisoString
value MisoString -> MisoString -> Bool
forall a. Eq a => a -> a -> Bool
== MisoString
themeSwitcherSelected ]
      )
      [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
label ]
    | (MisoString
value, MisoString
label) <- [(MisoString, MisoString)]
themeSwitcherThemes
    ]
-----------------------------------------------------------------------------
-- | Sun\/moon button that emits the given action on click
darkModeToggle_ :: action -> View model action
darkModeToggle_ :: forall action model. action -> View model action
darkModeToggle_ action
toggle =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.button_
  [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"btn-icon-outline size-8"
  , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"side" MisoString
"bottom"
  , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"tooltip" MisoString
"Toggle dark mode"
  , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"label" MisoString
"Toggle dark mode"
  , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"button"
  , action -> Attribute action
forall action. action -> Attribute action
E.onClickCapture action
toggle
  ]
  [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.span_
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"hidden dark:block" ]
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.circle_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.cx_ MisoString
"12", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.cy_ MisoString
"12", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.r_ MisoString
"4" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M12 2v2" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M12 20v2" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"m4.93 4.93 1.41 1.41" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"m17.66 17.66 1.41 1.41" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M2 12h2" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M20 12h2" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"m6.34 17.66-1.41 1.41" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"m19.07 4.93-1.41 1.41" ]
      ]
    ]
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.span_
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"block dark:hidden" ]
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" ]
      ]
    ]
  ]
-----------------------------------------------------------------------------
themeSwitcherCodeSample :: View model action
themeSwitcherCodeSample :: forall model action. View model action
themeSwitcherCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyThemeSwitcher (myHeader) where
  -----------------------------------------------------------------------------
  import           Miso
  -----------------------------------------------------------------------------
  import           Miso.UI.ThemeSwitcher
  -----------------------------------------------------------------------------
  data Action = ChangeTheme MisoString | ToggleDarkMode
  -----------------------------------------------------------------------------
  myHeader :: View model Action
  myHeader = vfrag
    [ themeSelect_ ChangeTheme defaultThemeSwitcherProps
    , darkModeToggle_ ToggleDarkMode
    ]
  """
-----------------------------------------------------------------------------
themeSwitcherPropsApi :: View model action
themeSwitcherPropsApi :: forall model action. View model action
themeSwitcherPropsApi =
  View model action
"""
  -- | Props for 'themeSelect_'
  data ThemeSwitcherProps action
    = ThemeSwitcherProps
    { themeSwitcherThemes :: [(MisoString, MisoString)]
      -- ^ (value, label) pairs
    , themeSwitcherSelected :: MisoString
      -- ^ value of the currently selected theme
    , themeSwitcherClasses :: [MisoString]
      -- ^ Extra classes for the @select@
    , themeSwitcherAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: basecoat's stock themes
  defaultThemeSwitcherProps :: ThemeSwitcherProps action
  defaultThemeSwitcherProps
    = ThemeSwitcherProps
    { themeSwitcherThemes =
      [ ("", "Default")
      , ("claude", "Claude")
      , ("cosmic", "Cosmic")
      , ("tangerine", "Tangerine")
      , ("supabase", "Supabase")
      ]
    , themeSwitcherSelected = ""
    , themeSwitcherClasses = [ "h-8", "leading-none" ]
    , themeSwitcherAttrs = []
    }
  """
-----------------------------------------------------------------------------