DatePicker

open FS.FluentUI.V8toV9

[<ReactComponent>]
let DatePickerTest() =
    let firstDayOfWeek, setFirstDayOfWeek = React.useState ("Sunday")
    let error, setError = React.useState (None)

    let days = [
        "Sunday";
        "Monday";
        "Tuesday";
        "Wednesday";
        "Thursday";
        "Friday";
        "Saturday";
    ]

    let validationMessage : string = error |> DatePickerErrorStrings.fromErrorTypeOption

    let selectedFirstDayOfWeek =
        match firstDayOfWeek with
        | "Sunday" -> datePicker.firstDayOfWeek.sunday
        | "Monday" -> datePicker.firstDayOfWeek.monday
        | "Tuesday" -> datePicker.firstDayOfWeek.tuesday
        | "Wednesday" -> datePicker.firstDayOfWeek.wednesday
        | "Thursday" -> datePicker.firstDayOfWeek.thursday
        | "Friday" -> datePicker.firstDayOfWeek.friday
        | "Saturday" -> datePicker.firstDayOfWeek.saturday
        | _ -> datePicker.firstDayOfWeek.sunday


    Fui.stack [
        stack.horizontal false
        stack.children [
            Fui.label [
                label.text "Select the first day of week"
                label.id "label"
            ]
            Fui.dropdown [
                dropdown.ariaLabelledBy "label"
                dropdown.onOptionSelect (fun (_: MouseEvent) (d: OptionOnSelectData) ->
                    match d.optionValue with
                    | Some v -> setFirstDayOfWeek v
                    | None -> ()
                )
                dropdown.defaultSelectedOptions [|firstDayOfWeek|]
                dropdown.value firstDayOfWeek
                dropdown.children (
                    days |> List.map (fun d ->
                        Fui.option [
                            option.key d
                            option.value d
                            option.children d
                        ]
                    )
                )
            ]
            Fui.field [
                field.label "Start Date"
                field.required true
                field.validationMessage validationMessage
                match error with
                | None -> field.validationState.none
                | _ -> field.validationState.error
                field.children (
                    Fui.datePicker [
                        datePicker.placeholder "Select a date..."
                        selectedFirstDayOfWeek
                        datePicker.borderless true
                        datePicker.showWeekNumbers true
                        datePicker.showMonthPickerAsOverlay true
                        datePicker.showGoToToday true
                        datePicker.allowTextInput true
                        datePicker.maxDate (DateTime.Today.AddDays(8))
                        datePicker.dateTimeFormatter ({ Fui.defaultDateFormatting with formatYear = fun d -> $"Year: {d.Year}"})
                        //TODO When customizing the formatted date with something other than built-in date functions, it conflicts with onValidationResult and doesn't render the date.
                        datePicker.formatDate (fun d -> d.ToShortDateString())
                        datePicker.onValidationResult (fun d -> setError d.error)
                        datePicker.calendar [
                            calendar.dateRangeType.workWeek
                            calendar.workWeekDays [ DayOfWeek.Monday; DayOfWeek.Tuesday; DayOfWeek.Wednesday; DayOfWeek.Thursday ]
                            calendar.isMonthPickerVisible false
                            calendar.strings ({
                                Fui.defaultDatePickerStrings with
                                    goToToday = "Pick Today"
                                    shortDays = [| "T"; "E"; "S"; "T"; "I"; "N"; "G"|]
                                }
                            )
                        ]
                    ]
                )
            ]
        ]
    ]