-----------------------------------------------------------------------------
module MyAccordion (myAccordion) where
-----------------------------------------------------------------------------
import Miso
import Miso.UI.Accordion
  ( accordion_
  , accordionSection_
  , accordionHeader_
  , accordionBody_
  )
-----------------------------------------------------------------------------
myAccordion :: View model action
myAccordion = accordion_ []
  [ accordionSection_ []
    [ accordionHeader_ []
      [ "Is it accessible?" ]
    , accordionBody_ []
      [ "Yes. It adheres to the WAI-ARIA design pattern." ]
    ]
  , accordionSection_ []
    [ accordionHeader_ []
      [ "Is it styled?" ]
    , accordionBody_ []
      [ "Yes. It comes with default styles , that matches the other components aesthetic." ]
    ]
  , accordionSection_ []
    [ accordionHeader_ []
      [ "Is it animated?" ]
    , accordionBody_ []
      [ "Yes. It's animated by default, but you can disable it if you prefer." ]
    ]
  ]
-----------------------------------------------------------------------------

-----------------------------------------------------------------------------
module MyAlert (alertSample) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import qualified Miso.UI.Alert as Alert
-----------------------------------------------------------------------------
alertSample :: View model action
alertSample =
  H.div_
  [ P.class_ "p-4" ]
  [ H.div_
    [ P.class_ "grid max-w-xl items-start gap-4"
    ]
    [ Alert.alert_ []
      [ Alert.successIcon
      , Alert.alertHeader_ [] [ "Success!" ]
      , Alert.alertSection_ []
        [ """
          Congratulations this is a
          successful alert !
          """
        ]
      ]
    , Alert.alert_
      [ P.class_ "alert-destructive" ]
      [ Alert.destructiveIcon
      , Alert.alertHeader_ [] [ "Warning!" ]
      , Alert.alertSection_ []
        [ """
          Something bad happened :( you're getting
          a destructive alert!
          """
        ]
      ]
    ]
  ]

-----------------------------------------------------------------------------
module MyAlertDialog (alertDialogComponent) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
data Action
  = ShowModal DOMRef
  | CloseDialog
-----------------------------------------------------------------------------
alertDialogComponent :: Component parent () Action
alertDialogComponent = vcomp
  where
    update_ (ShowModal domRef) = io_ $ do
      dialogRef <- nextSibling domRef
      void $ dialogRef # ("showModal" :: MisoString) $ ()

    update_ CloseDialog = io_ $ do
      dialog <- jsg "document"
        # ("getElementById" :: MisoString)
        $ ["alert-dialog-demo" :: MisoString]
      void $ dialog # ("close" :: MisoString) $ ()

    vcomp = component () update_ $ \() ->
      H.div_
      []
      [ H.button_
        [ P.type_ "button"
        , P.class_ "btn-outline"
        , E.onClickWith ShowModal
        ]
        [ "Open alert dialog"
        ]
      , H.dialog_
          [ P.id_ "alert-dialog-demo"
          , P.class_ "dialog"
          , P.aria_ "labelledby" "alert-dialog-title"
          , P.aria_ "describedby" "alert-dialog-description"
          ]
          [ H.article_ []
            [ H.header_ []
              [ H.h2_
                [ P.id_ "alert-dialog-title"
                ]
                [ "Are you absolutely sure?"
                ]
              , H.p_
                [ P.id_ "alert-dialog-description"
                ]
                [ text $
                    "This action cannot be undone. " <>
                    "This will permanently delete your" <>
                    "account and remove your data from our servers."
                ]
              ]
            , H.footer_ []
              [ H.button_
                [ P.class_ "btn-outline"
                , E.onClick CloseDialog
                ] [ "Cancel" ]
              , H.button_
                [ P.class_ "btn-primary"
                , E.onClick CloseDialog
                ] [ "Continue" ]
              ]
            ]
          ]
        ]