module Mui

open Fable.Core
open Fable.Core.JS

module Icons =

    [<JSX.Component>]
    let Home = JSX.jsx $"""
        import Home from '@mui/icons-material/Home';
        <Home />
    """

    [<JSX.Component>]
    let AccountTree = JSX.jsx $"""
        import AccountTree from '@mui/icons-material/AccountTree';
        <AccountTree />
    """

    [<JSX.Component>]
    let Assignment = JSX.jsx $"""
        import Assignment from '@mui/icons-material/Assignment';
        <Assignment />
    """

    [<JSX.Component>]
    let Archive = JSX.jsx $"""
        import Archive from '@mui/icons-material/Archive';
        <Archive />
    """

    [<JSX.Component>]
    let Message = JSX.jsx $"""
        import Message from '@mui/icons-material/Message';
        <Message />
    """

    [<JSX.Component>]
    let Tune = JSX.jsx $"""
        import Tune from '@mui/icons-material/Tune';
        <Tune />
    """

    [<JSX.Component>]
    let PieChart = JSX.jsx $"""
        import PieChart from '@mui/icons-material/PieChart';
        <PieChart />
    """

    // MenuIcon
    [<JSX.Component>]
    let Menu = JSX.jsx $"""
        import Menu from '@mui/icons-material/Menu';
        <Menu />
    """

    //chevronRightIcon
    [<JSX.Component>]
    let ChevronRight = JSX.jsx $"""
        import ChevronRight from '@mui/icons-material/ChevronRight';
        <ChevronRight />
    """

    //chevronLeftIcon
    [<JSX.Component>]
    let ChevronLeft = JSX.jsx $"""
        import ChevronLeft from '@mui/icons-material/ChevronLeft';
        <ChevronLeft />
    """
    //emailIcon
    [<JSX.Component>]
    let Email = JSX.jsx $"""
        import Email from '@mui/icons-material/Email';
        <Email />
    """

    //phoneIcon
    [<JSX.Component>]
    let Phone = JSX.jsx $"""
        import Phone from '@mui/icons-material/Phone';
        <Phone />
    """

    //closeIcon
    [<JSX.Component>]
    let Close = JSX.jsx $"""
        import Close from '@mui/icons-material/Close';
        <Close />
    """

    //addIcon
    [<JSX.Component>]
    let Add = JSX.jsx $"""
        import Add from '@mui/icons-material/Add';
        <Add />
    """
    //deleteIcon
    [<JSX.Component>]
    let Delete = JSX.jsx $"""
        import Delete from '@mui/icons-material/Delete';
        <Delete />
    """

    // personicon
    [<JSX.Component>]
    let Person = JSX.jsx $"""
        import Person from '@mui/icons-material/Person';
        <Person />
    """

    // Announcement
    [<JSX.Component>]
    let Announcement = JSX.jsx $"""
        import Announcement from '@mui/icons-material/Announcement';
        <Announcement />
    """

    //contactMail
    [<JSX.Component>]
    let ContactMail = JSX.jsx $"""
        import ContactMail from '@mui/icons-material/ContactMail';
        <ContactMail />
    """

    // shortText
    [<JSX.Component>]
    let ShortText = JSX.jsx $"""
        import ShortText from '@mui/icons-material/ShortText';
        <ShortText />
    """

    //Contacts
    [<JSX.Component>]
    let Contacts = JSX.jsx $"""
        import Contacts from '@mui/icons-material/Contacts';
        <Contacts />
    """

    //playlistaddcheck
    [<JSX.Component>]
    let PlaylistAddCheck = JSX.jsx $"""
        import PlaylistAddCheck from '@mui/icons-material/PlaylistAddCheck';
        <PlaylistAddCheck />
    """

    //Settings
    [<JSX.Component>]
    let Settings = JSX.jsx $"""
        import Settings from '@mui/icons-material/Settings';
        <Settings />
    """

    //Restore
    [<JSX.Component>]
    let Restore = JSX.jsx $"""
        import Restore from '@mui/icons-material/Restore';
        <Restore />
    """

    //ExitToApp
    [<JSX.Component>]
    let ExitToApp = JSX.jsx $"""
        import ExitToApp from '@mui/icons-material/ExitToApp';
        <ExitToApp />
    """

    // shareicon
    [<JSX.Component>]
    let Share = JSX.jsx $"""
        import Share from '@mui/icons-material/Share';
        <Share />
    """

    // editIcon
    [<JSX.Component>]
    let Edit = JSX.jsx $"""
        import Edit from '@mui/icons-material/Edit';
        <Edit />
    """

    //info icon
    [<JSX.Component>]
    let Info = JSX.jsx $"""
        import Info from '@mui/icons-material/Info';
        <Info />
    """

    //info icon
    [<JSX.Component>]
    let Create = JSX.jsx $"""
        import Create from '@mui/icons-material/Create';
        <Create />
    """

    //info icon
    [<JSX.Component>]
    let Medication = JSX.jsx $"""
        import Medication from '@mui/icons-material/Medication';
        <Medication />
    """

    //info icon
    [<JSX.Component>]
    let MedicationLiquid = JSX.jsx $"""
        import MedicationLiquid from '@mui/icons-material/MedicationLiquid';
        <MedicationLiquid />
    """

    //info icon
    [<JSX.Component>]
    let Vaccines = JSX.jsx $"""
        import Vaccines from '@mui/icons-material/Vaccines';
        <Vaccines />
    """

    //info icon
    [<JSX.Component>]
    let Notes = JSX.jsx $"""
        import Notes from '@mui/icons-material/Notes';
        <Notes />
    """

    //info icon
    [<JSX.Component>]
    let CampaignIcon = JSX.jsx $"""
        import CampaignIcon from '@mui/icons-material/Campaign';
        <CampaignIcon />
    """

    //info icon
    [<JSX.Component>]
    let Downloading = JSX.jsx $"""
        import Downloading from '@mui/icons-material/Downloading';
        <Downloading />
    """

    //info icon
    [<JSX.Component>]
    let Clear = JSX.jsx $"""
        import Clear from '@mui/icons-material/Clear';
        <Clear />
    """

    [<JSX.Component>]
    let FireExtinguisher = JSX.jsx $"""
        import FireExtinguisher from '@mui/icons-material/FireExtinguisher';
        <FireExtinguisher />
    """

    [<JSX.Component>]
    let LocalPharmacy = JSX.jsx $"""
        import LocalPharmacy from '@mui/icons-material/LocalPharmacy';
        <LocalPharmacy />
    """

    [<JSX.Component>]
    let Bloodtype = JSX.jsx $"""
        import Bloodtype from '@mui/icons-material/Bloodtype';
        <Bloodtype />
    """


    [<JSX.Component>]
    let Language = JSX.jsx $"""
        import Language from '@mui/icons-material/Language';
        <Language />
    """

    [<JSX.Component>]
    let LocalHospital = JSX.jsx $"""
        import LocalHospital from '@mui/icons-material/LocalHospital';
        <LocalHospital />
    """

    let PsychologyIcon = JSX.jsx $"""
        import PsychologyIcon from '@mui/icons-material/Psychology';
        <PsychologyIcon />
    """

    let CalculateIcon = JSX.jsx """
        import CalculateIcon from '@mui/icons-material/Calculate';
        <CalculateIcon/>
    """



type Color = {|
    ``50`` : string;
    ``100`` : string;
    ``200`` : string;
    ``300`` : string;
    ``400`` : string;
    ``500`` : string;
    ``600`` : string;
    ``700`` : string;
    ``800`` : string;
    ``900`` : string;
    A100 : string;
    A200 : string;
    A400 : string;
    A700 : string;
|}


type PaletteColor = {|
    main : string;
    light : string;
    dark : string;
    contrastText : string;
|}


[<Erase>]
type Theme =
    abstract member palette : {|
        common: {|
            black: string;
            white: string;
        |}
        mode: string;
        contrastThreshold: float;
        tonalOffset: float;
        primary: PaletteColor;
        secondary: PaletteColor;
        error: PaletteColor;
        warning: PaletteColor;
        info: PaletteColor;
        success: PaletteColor;
        grey: Color;
        text: {|
            primary: string;
            secondary: string;
            disabled: string;
        |}
        divider: string;

        background: {|
            paper: string;
            ``default``: string;
        |}

        getContrastText: string -> string;
    |}

    abstract member shadows : string[]

    abstract member spacing : int -> string

    abstract member zIndex : {|
        mobileStepper: int;
        speedDial: int;
        appBar: int;
        drawer: int;
        modal: int;
        snackbar: int;
        tooltip: int;
        fab: int;
    |}

    abstract member typography : {|
        fontFamily: string;
        fontSize: int;
        fontWeightLight: int;
        fontWeightRegular: int;
        fontWeightMedium: int;
        fontWeightBold: int;
        h1: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        h2: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        h3: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        h4: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        h5: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        h6: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        subtitle1: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        subtitle2: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        body1: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        body2: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        button: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        caption: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
        overline: {|
            fontFamily: string;
            fontWeight: int;
            fontSize: string;
            lineHeight: string;
            letterSpacing: string;
        |}
    |}

    abstract member transitions : {|
        easing: {|
            easeInOut: string;
            easeOut: string;
            easeIn: string;
            sharp: string;
        |}

        duration: {|
            shortest: string;
            shorter: string;
            short: string;
            standard: string;
            complex: string;
            enteringScreen: string;
            leavingScreen: string;
        |}

        ///prop, duration, easing, delay
        create: string array -> string -> string -> string -> string;
    |}


[<Import("useTheme", from="@mui/material/styles")>]
let useTheme() : Theme = jsNative

[<Erase>]
module Colors =
    type Amber =
        static member ``50`` = "#fff8e1"
        static member ``100`` = "#ffecb3"
        static member ``200`` = "#ffe082"
        static member ``300`` = "#ffd54f"
        static member ``400`` = "#ffca28"
        static member ``500`` = "#ffc107"
        static member ``600`` = "#ffb300"
        static member ``700`` = "#ffa000"
        static member ``800`` = "#ff8f00"
        static member ``900`` = "#ff6f00"
        static member A100 = "#ffe57f"
        static member A200 = "#ffd740"
        static member A400 = "#ffc400"
        static member A700 = "#ffab00"

    type Blue =
        static member ``50`` = "#e3f2fd"
        static member ``100`` = "#bbdefb"
        static member ``200`` = "#90caf9"
        static member ``300`` = "#64b5f6"
        static member ``400`` = "#42a5f5"
        static member ``500`` = "#2196f3"
        static member ``600`` = "#1e88e5"
        static member ``700`` = "#1976d2"
        static member ``800`` = "#1565c0"
        static member ``900`` = "#0d47a1"
        static member A100 = "#82b1ff"
        static member A200 = "#448aff"
        static member A400 = "#2979ff"
        static member A700 = "#2962ff"

    type BlueGrey =
        static member ``50`` = "#eceff1"
        static member ``100`` = "#cfd8dc"
        static member ``200`` = "#b0bec5"
        static member ``300`` = "#90a4ae"
        static member ``400`` = "#78909c"
        static member ``500`` = "#607d8b"
        static member ``600`` = "#546e7a"
        static member ``700`` = "#455a64"
        static member ``800`` = "#37474f"
        static member ``900`` = "#263238"

    type Brown =
        static member ``50`` = "#efebe9"
        static member ``100`` = "#d7ccc8"
        static member ``200`` = "#bcaaa4"
        static member ``300`` = "#a1887f"
        static member ``400`` = "#8d6e63"
        static member ``500`` = "#795548"
        static member ``600`` = "#6d4c41"
        static member ``700`` = "#5d4037"
        static member ``800`` = "#4e342e"
        static member ``900`` = "#3e2723"

    type Cyan =
        static member ``50`` = "#e0f7fa"
        static member ``100`` = "#b2ebf2"
        static member ``200`` = "#80deea"
        static member ``300`` = "#4dd0e1"
        static member ``400`` = "#26c6da"
        static member ``500`` = "#00bcd4"
        static member ``600`` = "#00acc1"
        static member ``700`` = "#0097a7"
        static member ``800`` = "#00838f"
        static member ``900`` = "#006064"

    type DeepOrange =
        static member ``50`` = "#fbe9e7"
        static member ``100`` = "#ffccbc"
        static member ``200`` = "#ffab91"
        static member ``300`` = "#ff8a65"
        static member ``400`` = "#ff7043"
        static member ``500`` = "#ff5722"
        static member ``600`` = "#f4511e"
        static member ``700`` = "#e64a19"
        static member ``800`` = "#d84315"
        static member ``900`` = "#bf360c"
        static member A100 = "#ff9e80"
        static member A200 = "#ff6e40"
        static member A400 = "#ff3d00"
        static member A700 = "#dd2c00"

    type DeepPurple =
        static member ``50`` = "#ede7f6"
        static member ``100`` = "#d1c4e9"
        static member ``200`` = "#b39ddb"
        static member ``300`` = "#9575cd"
        static member ``400`` = "#7e57c2"
        static member ``500`` = "#673ab7"
        static member ``600`` = "#5e35b1"
        static member ``700`` = "#512da8"
        static member ``800`` = "#4527a0"
        static member ``900`` = "#311b92"
        static member A100 = "#b388ff"
        static member A200 = "#7c4dff"
        static member A400 = "#651fff"
        static member A700 = "#6200ea"

    type Green =
        static member ``50`` = "#e8f5e9"
        static member ``100`` = "#c8e6c9"
        static member ``200`` = "#a5d6a7"
        static member ``300`` = "#81c784"
        static member ``400`` = "#66bb6a"
        static member ``500`` = "#4caf50"
        static member ``600`` = "#43a047"
        static member ``700`` = "#388e3c"
        static member ``800`` = "#2e7d32"
        static member ``900`` = "#1b5e20"
        static member A100 = "#b9f6ca"
        static member A200 = "#69f0ae"
        static member A400 = "#00e676"
        static member A700 = "#00c853"

    type Grey =
        static member ``50`` = "#fafafa"
        static member ``100`` = "#f5f5f5"
        static member ``200`` = "#eeeeee"
        static member ``300`` = "#e0e0e0"
        static member ``400`` = "#bdbdbd"
        static member ``500`` = "#9e9e9e"
        static member ``600`` = "#757575"
        static member ``700`` = "#616161"
        static member ``800`` = "#424242"
        static member ``900`` = "#212121"

    type Indigo =
        static member ``50`` = "#e8eaf6"
        static member ``100`` = "#c5cae9"
        static member ``200`` = "#9fa8da"
        static member ``300`` = "#7986cb"
        static member ``400`` = "#5c6bc0"
        static member ``500`` = "#3f51b5"
        static member ``600`` = "#3949ab"
        static member ``700`` = "#303f9f"
        static member ``800`` = "#283593"
        static member ``900`` = "#1a237e"
        static member A100 = "#8c9eff"
        static member A200 = "#536dfe"
        static member A400 = "#3d5afe"

    type LightBlue =
        static member ``50`` = "#e1f5fe"
        static member ``100`` = "#b3e5fc"
        static member ``200`` = "#81d4fa"
        static member ``300`` = "#4fc3f7"
        static member ``400`` = "#29b6f6"
        static member ``500`` = "#03a9f4"
        static member ``600`` = "#039be5"
        static member ``700`` = "#0288d1"
        static member ``800`` = "#0277bd"
        static member ``900`` = "#01579b"
        static member A100 = "#80d8ff"
        static member A200 = "#40c4ff"
        static member A400 = "#00b0ff"
        static member A700 = "#0091ea"

    type LightGreen =
        static member ``50`` = "#f1f8e9"
        static member ``100`` = "#dcedc8"
        static member ``200`` = "#c5e1a5"
        static member ``300`` = "#aed581"
        static member ``400`` = "#9ccc65"
        static member ``500`` = "#8bc34a"
        static member ``600`` = "#7cb342"
        static member ``700`` = "#689f38"
        static member ``800`` = "#558b2f"
        static member ``900`` = "#33691e"
        static member A100 = "#ccff90"
        static member A200 = "#b2ff59"
        static member A400 = "#76ff03"
        static member A700 = "#64dd17"

    type Lime =
        static member ``50`` = "#f9fbe7"
        static member ``100`` = "#f0f4c3"
        static member ``200`` = "#e6ee9c"
        static member ``300`` = "#dce775"
        static member ``400`` = "#d4e157"
        static member ``500`` = "#cddc39"
        static member ``600`` = "#c0ca33"
        static member ``700`` = "#afb42b"
        static member ``800`` = "#9e9d24"
        static member ``900`` = "#827717"
        static member A100 = "#f4ff81"
        static member A200 = "#eeff41"
        static member A400 = "#c6ff00"
        static member A700 = "#aeea00"

    type Orange =
        static member ``50`` = "#fff3e0"
        static member ``100`` = "#ffe0b2"
        static member ``200`` = "#ffcc80"
        static member ``300`` = "#ffb74d"
        static member ``400`` = "#ffa726"
        static member ``500`` = "#ff9800"
        static member ``600`` = "#fb8c00"
        static member ``700`` = "#f57c00"
        static member ``800`` = "#ef6c00"
        static member ``900`` = "#e65100"
        static member A100 = "#ffd180"
        static member A200 = "#ffab40"
        static member A400 = "#ff9100"
        static member A700 = "#ff6d00"

    type Pink =
        static member ``50`` = "#fce4ec"
        static member ``100`` = "#f8bbd0"
        static member ``200`` = "#f48fb1"
        static member ``300`` = "#f06292"
        static member ``400`` = "#ec407a"
        static member ``500`` = "#e91e63"
        static member ``600`` = "#d81b60"
        static member ``700`` = "#c2185b"
        static member ``800`` = "#ad1457"
        static member ``900`` = "#880e4f"
        static member A100 = "#ff80ab"
        static member A200 = "#ff4081"
        static member A400 = "#f50057"
        static member A700 = "#c51162"

    type Purple =
        static member ``50`` = "#f3e5f5"
        static member ``100`` = "#e1bee7"
        static member ``200`` = "#ce93d8"
        static member ``300`` = "#ba68c8"
        static member ``400`` = "#ab47bc"
        static member ``500`` = "#9c27b0"
        static member ``600`` = "#8e24aa"
        static member ``700`` = "#7b1fa2"
        static member ``800`` = "#6a1b9a"
        static member ``900`` = "#4a148c"
        static member A100 = "#ea80fc"
        static member A200 = "#e040fb"
        static member A400 = "#d500f9"
        static member A700 = "#aa00ff"

    type Red =
        static member ``50`` = "#ffebee"
        static member ``100`` = "#ffcdd2"
        static member ``200`` = "#ef9a9a"
        static member ``300`` = "#e57373"
        static member ``400`` = "#ef5350"
        static member ``500`` = "#f44336"
        static member ``600`` = "#e53935"
        static member ``700`` = "#d32f2f"
        static member ``800`` = "#c62828"
        static member ``900`` = "#b71c1c"
        static member A100 = "#ff8a80"
        static member A200 = "#ff5252"
        static member A400 = "#ff1744"
        static member A700 = "#d50000"

    type Yellow =
        static member ``50`` = "#fffde7"
        static member ``100`` = "#fff9c4"
        static member ``200`` = "#fff59d"
        static member ``300`` = "#fff176"
        static member ``400`` = "#ffee58"
        static member ``500`` = "#ffeb3b"
        static member ``600`` = "#fdd835"
        static member ``700`` = "#fbc02d"
        static member ``800`` = "#f9a825"
        static member ``900`` = "#f57f17"
        static member A100 = "#ffff8d"
        static member A200 = "#ffff00"
        static member A400 = "#ffea00"
        static member A700 = "#ffd600"


module TypoGraphy =

    let create v text =
        JSX.jsx
            $"""
        import Typography from "@mui/material/Typography";

        <Typography
            variant={v}
            display="inline"
            >
            {text}
        </Typography>
        """

    let createStrong v text =
        JSX.jsx
            $"""
        import Typography from "@mui/material/Typography";

        <Typography
            variant={v}
            display="inline"
            >
            <strong>{text}</strong>
        </Typography>
        """

    let createWithColors bc fc v text =
        JSX.jsx
            $"""
        import Typography from "@mui/material/Typography";

        <Typography
            backgroundColor={bc}
            color={fc}
            variant={v}
            display="inline"
            >
            {text}
        </Typography>
        """

    let createStrongWithColors bc fc v text =
        JSX.jsx
            $"""
        import Typography from "@mui/material/Typography";

        <Typography
            backgroundColor={bc}
            color={fc}
            variant={v}
            display="inline"
            >
            <strong>{text}</strong>
        </Typography>
        """


open System.ComponentModel
open Fable.Core.JsInterop


[<EditorBrowsable(EditorBrowsableState.Never)>]
module HookImports =

    let useMediaQuery (query: string) : bool =
        importDefault "@mui/material/useMediaQuery"

    let useMediaQuery_theme (getQuery: Theme -> string) : bool =
        importDefault "@mui/material/useMediaQuery"



[<Erase>]
type Hooks =

    static member inline useMediaQuery(query: string) : bool = HookImports.useMediaQuery query

    static member inline useMediaQuery(getQuery: Theme -> string) : bool =
        HookImports.useMediaQuery_theme getQuery
