reactstrap#DropdownMenu TypeScript Examples

Dropdown: React.FC<DropdownProps> = (props) => {
  const { caret, color, size, label, right, className, children, direction = 'down' } = props;
  const [open, setOpen] = React.useState(false);

  const toggle = () => setOpen(!open);

  return (
    <ReactstrapDropdown className={className} direction={direction} isOpen={open} toggle={toggle}>
      <DropdownToggle caret={caret} color={color} size={size}>
        {label}
      </DropdownToggle>
      <DropdownMenu right={right}>{children}</DropdownMenu>
    </ReactstrapDropdown>
  );
}

SettingsButton: React.FC<SettingsButtonProps> = (props: SettingsButtonProps) => {
  const { settings } = props;
  const [open, setOpen] = React.useState(false);
  const toggle = () => setOpen((prevState) => !prevState);
  return (
    <Dropdown className='settings position-fixed pl-2 d-none d-md-block' isOpen={open} toggle={toggle}>
      <DropdownToggle className='btn-dropdown-settings'>
        <SettingsIcon />
      </DropdownToggle>
      <DropdownMenu>
        {settings.map((item, index: number) => {
          const [state, setState] = item.state;
          return (
            <div key={index} className='settings-item flex-row'>
              <Switch
                className='w-100 p-2'
                label=''
                textLabel={item.label}
                name=''
                trackColor='rgb(144, 202, 249)'
                sliderColor='rgb(33, 150, 243)'
                check={state}
                value={state}
                onChange={() => setState(!state)}
              />
            </div>
          );
        })}
      </DropdownMenu>
    </Dropdown>
  );
}

export function LanguageSwitcher({ ...restProps }: LanguageSwitcherProps) {
  const [currentLocale, setCurrentLocale] = useRecoilState(localeAtom)
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const toggle = useCallback(() => setDropdownOpen((prevState) => !prevState), [])
  const setLocaleLocal = useCallback((locale: Locale) => () => setCurrentLocale(locale), [setCurrentLocale])

  return (
    <Dropdown className="language-switcher" isOpen={dropdownOpen} toggle={toggle} {...restProps}>
      <DropdownToggle nav caret>
        <LanguageSwitcherItem locale={currentLocale} />
      </DropdownToggle>
      <DropdownMenu className="language-switcher-menu" positionFixed>
        {localesArray.map((locale) => {
          const isCurrent = locale.key === currentLocale.key
          return (
            <DropdownItem active={isCurrent} key={locale.key} onClick={setLocaleLocal(locale)}>
              <LanguageSwitcherItem locale={locale} />
            </DropdownItem>
          )
        })}
      </DropdownMenu>
    </Dropdown>
  )
}

ClientHistory = () => {
    let clientData = useSelector(selectClientData);
    let [dropDownOpen, setDropdownOpen] = useState<boolean>(false);
    let [dropDownValue, setDropdownValue] = useState<String>("All");
    let [appointments, setAppointments] = useState<Array<Appointment>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        const getAppointments = async () => {
            return (await api.GetClientAppointments(clientData.clientId)).data.reverse();
        }

        getAppointments().then(value => {
                setAppointments(value);
                dispatch(clientDataActions.setAppointment(value));
            }
        )
    }, [clientData.clientId, dispatch]);

    let filteredAppointments = appointments;
    if (dropDownValue==="Denied"){
        filteredAppointments = appointments.filter((appointment) => !appointment.confirmed);
    } else if (dropDownValue==="Completed"){
        filteredAppointments = appointments.filter((appointment) => appointment.confirmed);
    }

    let meetingCards = filteredAppointments.map(appointment => (
        <MeetingCard appt={appointment} isTutor={false} includePrevious={true}/>
    ));

    return (
        <Container fluid style={{maxWidth:"100vw"}}>
            <Row className="title" style={{ marginTop: '25px'}}>
            <div className="profile-text">History</div>
            </Row>

            <hr></hr>

            <Dropdown isOpen={dropDownOpen} toggle={() => {setDropdownOpen(!dropDownOpen)}}>
                <DropdownToggle caret >
                    {dropDownValue}
                </DropdownToggle>

                <DropdownMenu>
                    <DropdownItem
                        onClick={(event) => {
                            setDropdownValue("All");
                            setDropdownOpen(false);
                        }}>All</DropdownItem>
                    <DropdownItem
                        onClick={(event) => {
                            setDropdownValue("Completed");
                            setDropdownOpen(false);
                        }}>Completed</DropdownItem>
                    <DropdownItem
                        onClick={(event) => {
                            setDropdownValue("Denied");
                            setDropdownOpen(false);
                        }}>Denied</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            {meetingCards}
        </Container>
    );
}

Meetings = (params: IParams) => {
    let clientData = useSelector(selectClientData);
    let tutorData = useSelector(selectTutorData);
    let [dropDownOpen, setDropdownOpen] = useState<boolean>(false);
    let [dropDownValue, setDropdownValue] = useState<String>("All");
    let [appointments, setAppointments] = useState<Array<Appointment>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        const getAppointments = async () => {
            return params.mode === "Tutor" ? (await api.GetTutorAppointments(tutorData.tutorId)).data : 
            (await api.GetClientAppointments(clientData.clientId)).data;
        }

        getAppointments().then(value => {
                
                setAppointments(value);
                if(params.mode === "Tutor")
                    dispatch(tutorDataActions.setAppointment(value));
                else
                    dispatch(clientDataActions.setAppointment(value));
            }
        )
    }, [clientData.clientId, tutorData.tutorId, dispatch]);


    let filteredAppointments = appointments;
    if (dropDownValue==="Pending"){
        filteredAppointments = appointments.filter((appointment) => !appointment.confirmed);
    } else if (dropDownValue==="Upcoming"){
        filteredAppointments = appointments.filter((appointment) => appointment.confirmed);
    }

    let meetingCards = filteredAppointments.map(appointment => (
        <MeetingCard appt={appointment} isTutor={params.mode==="Tutor"} includePrevious={false}/>
    ));


    return (
        <Container fluid>
            <Row className="title" style={{ marginTop: '25px'}}>
            <div className="profile-text">Meetings</div>
            </Row>

            <hr></hr>

            <Dropdown isOpen={dropDownOpen} toggle={() => {setDropdownOpen(!dropDownOpen)}}>
                <DropdownToggle caret >
                    {dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("All");
                            setDropdownOpen(false);
                        }}>All</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Pending");
                            setDropdownOpen(false);
                        }}>Pending</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Upcoming");
                            setDropdownOpen(false);
                        }}>Upcoming</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            {meetingCards}
        </Container>
    );
}

TutorHistory = () => {
    let tutorData = useSelector(selectTutorData);
    let [dropDownOpen, setDropdownOpen] = useState<boolean>(false);
    let [dropDownValue, setDropdownValue] = useState<String>("All");
    let [appointments, setAppointments] = useState<Array<Appointment>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        const getAppointments = async () => {
            return (await api.GetTutorAppointments(tutorData.tutorId)).data.reverse();
        }

        getAppointments().then(value => {
                setAppointments(value);
                dispatch(tutorDataActions.setAppointment(value));
            }
        )
    }, [tutorData.tutorId, dispatch]);

    let filteredAppointments = appointments;
    if (dropDownValue==="Denied"){
        filteredAppointments = appointments.filter((appointment) => !appointment.confirmed);
    } else if (dropDownValue==="Completed"){
        filteredAppointments = appointments.filter((appointment) => appointment.confirmed);
    }
   
    let meetingCards = filteredAppointments.map(appointment => (
        <MeetingCard appt={appointment} isTutor={true} includePrevious={true}/>
    ));

    return (
        <Container fluid>
            <Row className="title" style={{ marginTop: '25px'}}>
            <div className="profile-text">History</div>
            </Row>

            <hr></hr>

            <Dropdown isOpen={dropDownOpen} toggle={() => {setDropdownOpen(!dropDownOpen)}}>
                <DropdownToggle caret >
                    {dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("All");
                            setDropdownOpen(false);
                        }}>All</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Completed");
                            setDropdownOpen(false);
                        }}>Completed</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Denied");
                            setDropdownOpen(false);
                        }}>Denied</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            {meetingCards}
        </Container>
    );
}

Step4 = () => {
    const cal: any = useRef(null);
    const [mobile, setMobile] = useState(isMobile);
    const [currentView, setCurrentView] = useState("week");
    const [calTypeOpen, setCalTypeOpen] = useState(false);
    const [prevSchedule, setPreviousSchedule] = useState<any>();

    const dispatch = useDispatch();
    const clientFlowData = useSelector(selectClientFlowData);
    let previousAppts = [{
        id: "1",
        calendarId: "0",
        // title: clientFlowData.appointmentSubjectId,
        title: "Tutor Time!",
        category: "time",
        dueDateClass: "",
        start: new Date(clientFlowData.appointmentStartTime),
        end: new Date(clientFlowData.appointmentEndTime),
        bgColor: "lightblue",
        location: clientFlowData.appointmentLocation,
    },];

    useEffect(() => {
        // Gather the currently schedule appointments from tutor and block off times
        const generateTutorTimes = async () => {
            // Add previously schedule meeting to array

            let appts = await api.GetTutorAppointments(clientFlowData.selectedTutor._id);

            if (appts !== null) {
                appts.data.forEach(appt => {
                    previousAppts.push({
                        id: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),
                        calendarId: "0",
                        title: "Blocked Time",
                        category: "time",
                        dueDateClass: "",
                        start: new Date(appt.start_time),
                        end: new Date(appt.end_time),
                        bgColor: "red",
                        location: "Blocked",
                    })
                })
            }
        }

        generateTutorTimes();
    }, []);

    const generateTutorTimes = async () => {
        // Add previously schedule meeting to array
        let previousAppts = [{
            id: "1",
            calendarId: "0",
            // title: clientFlowData.appointmentSubjectId,
            title: "Tutor Time!",
            category: "time",
            dueDateClass: "",
            start: new Date(clientFlowData.appointmentStartTime),
            end: new Date(clientFlowData.appointmentEndTime),
            bgColor: "lightblue",
            location: clientFlowData.appointmentLocation,
        },];

        let appts = await api.GetTutorAppointments(clientFlowData.selectedTutor._id);

        if (appts !== null) {
            appts.data.forEach(appt => {
                previousAppts.push({
                    id: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),
                    calendarId: "0",
                    title: "Blocked Time",
                    category: "time",
                    dueDateClass: "",
                    start: new Date(appt.start_time),
                    end: new Date(appt.end_time),
                    bgColor: "red",
                    location: "Blocked",
                })
            })
        }

        return previousAppts;
    }

    const toggleCalType = () => {
        setCalTypeOpen(!calTypeOpen);
    };

    // Template Functions //
    const onClickSchedule = (e: any) => {
        const {calendarId, id} = e.schedule;
        const event = cal.current.calendarInst.getElement(id, calendarId);
    };

    /* After all schedules are rendered
       on the calendar run this function.
       which saves the schedule details
       to store. */
    const onAfterRenderSchedule = (e: any) => {};

    const onBeforeCreateSchedule = (scheduleData: any) => {
        console.log("BEFORE CREATE SCHEDULE:", scheduleData);
        let id = 1;

        const schedule = {
            id: id,
            title: "Tutor Time!",
            isAllDay: scheduleData.isAllDay,
            start: scheduleData.start,
            end: scheduleData.end,
            category: scheduleData.isAllDay ? "allday" : "time",
            dueDateClass: "",
            bgColor: "lightblue",
            // location: scheduleData.location,
            // raw: {
            //   class: scheduleData.raw["class"],
            // },
            // state: scheduleData.state,
        };

        cal.current.calendarInst.createSchedules([schedule]);

        let startDay = scheduleData.start;
        let endDay = scheduleData.end;
        let apptLoc = scheduleData.location;
        let apptSubj = scheduleData.title;

        let apptDate = new Date(startDay._date).toDateString();

        let apptStart = startDay.getTime();
        let apptEnd = endDay.getTime();

        dispatch(actions.setAppointment([apptDate, apptStart, apptEnd, apptLoc, apptSubj]));
    };

    const onBeforeDeleteSchedule = (res: any) => {
        console.log("onBeforeDelete");
        const {id, calendarId} = res.schedule;
        cal.current.calendarInst.deleteSchedule(id, calendarId);
    };

    const onBeforeUpdateSchedule = (e: any) => {
        console.log("onBeforeDelete");

        const {schedule, changes} = e;

        cal.current.calendarInst.updateSchedule(
            schedule.id,
            schedule.calendarId,
            changes
        );

        let startDay = schedule.start;
        let endDay = schedule.end;

        let apptLoc = schedule.location;
        let apptSubj = schedule.title;

        let apptDate = new Date(startDay._date).toDateString();

        let apptStart = startDay.getTime();
        let apptEnd = endDay.getTime();

        dispatch(actions.setAppointment([apptDate, apptStart, apptEnd, apptLoc, apptSubj]));
    };
    ////////////////////////

    // Instance Functions //
    const calNext = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.next();
    };

    const calBack = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.prev();
    };

    const calReturn = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.today();
    };

    const setMonthView = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.changeView("month", true);
        setCurrentView("month");
    };

    const setWeekView = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.changeView("week", true);
        setCurrentView("week");
    };

    const setDayView = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.changeView("day", true);
        setCurrentView("day");
    };
    ////////////////////////

    return (
        <Container>
            <Title>
                <h3 className="hr mt-1">Select a Time</h3>
            </Title>

            <div style={{display: "flex", alignSelf: "left"}}>
                <Button style={{margin: "0.2em"}} onClick={calBack}>
                    Back
                </Button>
                <Button style={{margin: "0.2em"}} onClick={calReturn}>
                    Today
                </Button>
                <Button style={{margin: "0.2em"}} onClick={calNext}>
                    Next
                </Button>
                <Dropdown
                    style={{margin: "0.2em"}}
                    isOpen={calTypeOpen}
                    toggle={() => {
                        toggleCalType();
                    }}
                >
                    <DropdownToggle caret>{currentView}</DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem onClick={setDayView}>Day</DropdownItem>
                        <DropdownItem onClick={setWeekView}>Week</DropdownItem>
                        <DropdownItem onClick={setMonthView}>Month</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>

            <div style={{overflow: 'auto'}}>
                <Calendar
                    height={"400px"}
                    ref={cal}
                    calendars={[
                        {
                            id: "0",
                            name: "Schedule",
                            bgColor: "#9e5fff",
                            borderColor: "#9e5fff",
                        },
                    ]}
                    view={currentView}
                    week={mobile ? mobileWeekOptions : weekOptions}
                    taskView={false}
                    scheduleView={["time"]}
                    useDetailPopup={true}
                    schedules={previousAppts}
                    onClickSchedule={onClickSchedule}
                    onBeforeCreateSchedule={onBeforeCreateSchedule}
                    onBeforeDeleteSchedule={onBeforeDeleteSchedule}
                    onBeforeUpdateSchedule={onBeforeUpdateSchedule}
                    onAfterRenderSchedule={onAfterRenderSchedule}
                />
            </div>
        </Container>
    );
}

DataVisualization = () => {
  
  const [dropdownLabel2, setDropdownLabel2] = useState("All Time");
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [dropdownOpen2, setDropdownOpen2] = useState(false);
  const [dropdownOpen3, setDropdownOpen3] = useState(false);
  const [dateRange, setDateRange] = useState(new Date(2020,0,0));
  const [course, setCourse] = useState("All Courses");
  const [courses, setCourses] = useState(new Array<string>());
  const [appointments, setAppointments] = useState(0);
  const [hours, setHours] = useState(0);
  const [earnings, setEarnings] = useState(0);
  const [chart, setChart] = useState(0);
  const [meetingsMap, setMeetingsMap] = useState(new Map<number,number>());
  const [earningsMap, setEarningsMap] = useState(new Map<number,number>());
  const toggle = () => setDropdownOpen(prevState => !prevState);
  const toggle2 = () => setDropdownOpen2(prevState => !prevState);
  const toggle3 = () => setDropdownOpen3(prevState => !prevState);
  let tutor = useSelector(selectClientData);
  let tutorID = tutor.clientId;
  useEffect(() => {
    GetTutoringHours(course, tutorID).then( apiResult => {
    setMeetingsMap(apiResult[0]);
    setEarningsMap(apiResult[1]);
    setAppointments(apiResult[3]);
    setHours(apiResult[2]);
    setEarnings(apiResult[4]);
    setCourses(apiResult[5]);
    });
  },[]);



  let coursesDropdowns:Array<ReactElement> = [];
  coursesDropdowns.push(<DropdownItem onClick={() => {
    setCourse("All Courses");
    GetTutoringHours("All Courses", tutorID).then( apiResult => {
      setMeetingsMap(apiResult[0]);
      setEarningsMap(apiResult[1]);
      setAppointments(apiResult[3]);
      setHours(apiResult[2]);
      setEarnings(apiResult[4]);
      setCourses(apiResult[5]);
      });
  }}>
    All Courses
  </DropdownItem>);
  for (let i = 0; i < courses.length; i++) {
    coursesDropdowns.push(<DropdownItem onClick={() => {
      setCourse(courses[i]);
      GetTutoringHours(courses[i], tutorID).then( apiResult => {
        setMeetingsMap(apiResult[0]);
        setEarningsMap(apiResult[1]);
        setAppointments(apiResult[3]);
        setHours(apiResult[2]);
        setEarnings(apiResult[4]);
        setCourses(apiResult[5]);
        });
    }}>
      {courses[i]}
    </DropdownItem>);         
  }
    return (
        <Container fluid className="background" style={{marginBottom:'10em'}}>
        <hr></hr>
        <Row xs="2" className="parent">

        </Row>
        <div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                    <Card body>
                    <CardTitle tag="h5">Appointments</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            end={appointments} 
                            useEasing={true}
                            duration={3.5}
                            />
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                    <Card body>
                    <CardTitle tag="h5">Hours Tutored</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            end={hours} 
                            useEasing={true}
                            duration={4}
                            />
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                <Card body>
                    <CardTitle tag="h5">Earnings</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            decimals={2}
                            prefix="$"
                            end={earnings} 
                            useEasing={true}
                            

                            duration={4}/>
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
            </div>
        
            <div style={{display:'flex', flexDirection:'row'}}>
            <Card body>
                <CardTitle tag="h5">
                <div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
                  <div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
                    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
                      <DropdownToggle caret>
                        {(chart === 0) ? "Calendar" : (chart === 1 ? "Total Hours" : "Total Earnings")}
                        
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Tutor Data</DropdownItem>
                        <DropdownItem onClick={() => setChart(0)}>Calendar</DropdownItem>
                        <DropdownItem onClick={() => setChart(1)}>Total Hours</DropdownItem>
                        <DropdownItem divider />
                        <DropdownItem onClick={() => setChart(2)}>Total Earnings</DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                  </div>
                    { chart != 0 ?
                    <div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
                    <Dropdown isOpen={dropdownOpen2} toggle={toggle2} style={{alignSelf:'right'}}>
                      <DropdownToggle caret>
                        {dropdownLabel2}
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Date Range</DropdownItem>
                        <DropdownItem onClick={() => {
                          let date = new Date(getNow());
                          date.setFullYear(2020);
                          date.setMonth(0);
                          date.setDate(0);
                          setDateRange(date);
                          setDropdownLabel2("All Time");
                        }}>
                          All Time
                        </DropdownItem>
                        
                        <DropdownItem onClick={() => {
                              let date = new Date(getNow());
                              date.setFullYear(date.getFullYear() - 1);
                              setDateRange(date);
                              setDropdownLabel2("1Y");

                            }}>1Y
                        </DropdownItem>

                        <DropdownItem onClick={() => { 
                              let date = new Date(getNow()); 
                              date.setMonth(date.getMonth() - 6);
                              setDateRange(date);
                              setDropdownLabel2("6M");
                            }}>6M
                        </DropdownItem>
                        <DropdownItem onClick={() => { 
                              let date = new Date(getNow()); 
                              date.setMonth(date.getMonth() - 1);
                              setDateRange(date);
                              setDropdownLabel2("1M");
                            }}>1M
                        </DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                    </div>
                    : <div></div>}
                    <div style={{display:'flex', flexDirection:'column', marginTop:'0.25em'}}>
                      <Dropdown isOpen={dropdownOpen3} toggle={toggle3} style={{alignSelf:'right'}}>
                      <DropdownToggle caret>
                        {course}
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Filter by Course</DropdownItem>
                        {coursesDropdowns}
                      </DropdownMenu>
                    </Dropdown>
                    </div>
                    </div>
                    </CardTitle>
                    
                    <CardText>
                      {chart == 0 ?
                        <TutorHeatmap dateMap={meetingsMap} />
                        : (chart == 1 ? <LineGraph dateMap={meetingsMap}
                          fromTime={dateRange}
                          isHours={true}/>
                          :<LineGraph dateMap={earningsMap}
                          fromTime={dateRange}
                          isHours={false}/>
                          )}
                      
                      
                    </CardText>

                    
              </Card>
            </div>
            </Container>
    );
}

export default function DiemCheckout({ paymentId, orderId, demoMode }: DiemCheckoutProps) {
  const [paymentOptions, setPaymentOptions] = useState<
    PaymentOptions | undefined
  >();
  const [selectedOption, setSelectedOption] = useState(0);
  const [chooseWallet, setChooseWallet] = useState(true);

  useEffect(() => {
    let isOutdated = false;

    const fetchOrder = async () => {
      try {
        const fetched = await new Vasp().getPaymentOptions(paymentId);

        if (!isOutdated) {
          setPaymentOptions(fetched);
        }
      } catch (e) {
        console.error("Unexpected error", e);
      }
    };

    // noinspection JSIgnoredPromiseFromCall
    fetchOrder();

    return () => {
      isOutdated = true;
    };
  }, [paymentId]);

  const onCurrencyClick = (index: number) => setSelectedOption(index);

  if (!paymentOptions) {
    return <div>Loading...</div>;
  }

  const handleClick = () => {
    setChooseWallet(false)
  }

  return (
    <>
      <div className="w-100">
        <Row>
          <Col className="text-nowrap text-right">Total price:</Col>
          <Col className="d-flex align-items-center">
            <span className="text-nowrap">
            {fiatToHumanFriendly(paymentOptions.fiatPrice)}{" "}
            {paymentOptions.fiatCurrency}
            </span>
            <FontAwesomeIcon size="xs" icon={faQuestionCircle} className="ml-2" id="totalPriceHelp" />
            <UncontrolledTooltip target="totalPriceHelp">
              The price in fiat set by the merchant
            </UncontrolledTooltip>
          </Col>
        </Row>
        <Row>
          <Col className="text-nowrap text-right align-self-center">
            Payment currency:
          </Col>
          <Col className="d-flex align-items-center">
            <UncontrolledDropdown>
              <DropdownToggle caret color="outline-dark" className="py-0 px-2">
                {paymentOptions.options[selectedOption].currency}
              </DropdownToggle>
              <DropdownMenu>
                {paymentOptions.options.map((op, i) => (
                  <DropdownItem
                    key={op.currency}
                    onClick={() => onCurrencyClick(i)}
                  >
                    {op.currency}
                  </DropdownItem>
                ))}
              </DropdownMenu>
            </UncontrolledDropdown>
            <FontAwesomeIcon size="xs" icon={faQuestionCircle} className="ml-2" id="currencyHelp" />
            <UncontrolledTooltip target="currencyHelp">
              Please select a Diem currency
            </UncontrolledTooltip>
          </Col>
        </Row>
        <Row>
          <Col className="text-nowrap text-right">Total to pay:</Col>
          <Col className="d-flex align-items-center">
            <span className="text-nowrap">
              {diemToHumanFriendly(
                paymentOptions.options[selectedOption].amount
              )}{" "}
              {paymentOptions.options[selectedOption].currency}
            </span>
            <FontAwesomeIcon size="xs" icon={faQuestionCircle} className="ml-2" id="totalToPayHelp" />
            <UncontrolledTooltip target="totalToPayHelp">
              The amount you will be changed in Diem
            </UncontrolledTooltip>
          </Col>
        </Row>
      </div>
      <div>
        {!chooseWallet ? (
          <>
            <QRCode
              className="img-fluid mt-4"
              size={192}
              value={paymentOptions.options[selectedOption].paymentLink}
              imageSettings={{
                src: require("../logo.svg"),
                height: 32,
                width: 32,
                excavate: true,
              }}
            />
            <div className="text-center small py-4 font-weight-bold">
              - OR -
            </div>
            <div className="text-center">
              <Button color="primary" size="sm" onClick={() => setChooseWallet(true)}>
                Open in Diem wallet
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className="mt-4">
              <div className="text-center">Choose your wallet:</div>
              <PayWithDiem
                paymentInfo={paymentOptions}
                orderId={orderId}
                demoMode={demoMode}
              />
            </div>
            <div className="text-center small py-4 font-weight-bold">
              - OR -
            </div>
            <div className="text-center">
              <Button color="primary" size="sm" onClick={()=>handleClick()}>
                Scan QR
              </Button>
            </div>
          </>
        )}
      </div>
    </>
  );
}

Header: React.FC<{}> = (props) => {
  const [isUserMenuDropdownOpen, setIsUserMenuDropdownOpen] = useState(false);
  const [isMobileNavMenuOpen, setIsMobileNavMenuOpen] = useState(false);
  const [subItemMenuOpenMap, setSubItemMenuOpenMap] = useState<{
    [key: string]: boolean | undefined;
  }>({});

  const [context] = useContext(Context);

  const menu = [
    {
      name: 'hot',
      to: '/',
      width: 48,
    },
    {
      name: 'new',
      to: '/new',
      width: 48,
    },
    {
      name: 'top',
      width: 48,
      subitems: [
        {
          name: 'week',
          to: '/top/week',
        },
        {
          name: 'month',
          to: '/top/month',
        },
        {
          name: 'year',
          to: '/top/year',
        },
        {
          name: 'all',
          to: '/top/all',
        },
      ],
    },
    {
      name: 'random',
      to: '/random',
      width: 80,
    },
    {
      name: 'about',
      to: '/about',
      width: 80,
    },
  ];

  const location = useLocation();

  // If a subitem is selected, this will point to the parent
  // i.e. for /top/year this will contain the whole top object
  const menuSelectedItem = menu.find(
    (item) =>
      item.to === location.pathname ||
      (item.subitems &&
        item.subitems.find((subitem) => subitem.to === location.pathname))
  );

  // And this one will contain "year"
  const menuSelectedSubitem = menuSelectedItem?.subitems?.find(
    (subitem) => subitem.to === location.pathname
  );

  const menuDefaultItem = { name: 'menu', to: '/' };

  const collapsedMenuTo =
    (menuSelectedSubitem && menuSelectedSubitem.to) || // We're in a subitem (i.e. /top/week)
    (menuSelectedItem?.to && menuSelectedItem.to) || // We're on a top level page (i.e. /new)
    menuDefaultItem.to; // default

  const collapsedMenuText =
    (menuSelectedSubitem &&
      menuSelectedItem &&
      menuSelectedItem.name + ' | ' + menuSelectedSubitem.name) || // We're in a subitem (i.e. /top/week)
    (menuSelectedItem && menuSelectedItem.name) || // We're on a top level page (i.e. /new)
    menuDefaultItem.name; // default

  return (
    <header>
      <div
        style={{
          maxWidth: topBarMaxWidth,
          paddingLeft: 16,
          paddingRight: 16,
          display: 'flex',
          alignItems: 'center',
          flex: 1,
          textAlign: 'center',
          whiteSpace: 'nowrap',
          minWidth: 0,
          width: '100%',
        }}
      >
        <div style={{ marginRight: 32 }}>
          <a href="/" className="no-link-styling d-flex align-items-center">
            <div className="d-flex mr-3">
              {[4, 4, 0].map((marginRight, i) => (
                <div
                  key={i}
                  style={{
                    width: 6,
                    height: 23,
                    marginRight,
                    background: 'black',
                    borderRadius: 1,
                  }}
                />
              ))}
            </div>
            Dwitter.net
          </a>
        </div>
        <div className="d-flex d-sm-none">
          <Dropdown
            isOpen={isMobileNavMenuOpen}
            toggle={() => setIsMobileNavMenuOpen(!isMobileNavMenuOpen)}
          >
            <DropdownToggle caret={true}>
              {menuSelectedItem && (
                <NavLink
                  to={collapsedMenuTo}
                  exact={true}
                  style={{
                    pointerEvents: 'none',
                    display: 'inline-block',
                    marginRight: 8,
                  }}
                  activeStyle={{
                    fontWeight: 'bold',
                  }}
                >
                  {collapsedMenuText}
                </NavLink>
              )}
            </DropdownToggle>
            <DropdownMenu>
              {menu.map((item, itemKey) =>
                item.to ? (
                  <Link
                    key={itemKey}
                    className="dropdown-item"
                    to={item.to}
                    onClick={() => setIsMobileNavMenuOpen(false)}
                    style={{
                      fontWeight:
                        item.to === location.pathname ? 'bold' : 'normal',
                    }}
                  >
                    {item.name}
                  </Link>
                ) : (
                  item.subitems?.map((subitem, subitemKey) => (
                    <Link
                      key={subitemKey}
                      className="dropdown-item"
                      to={subitem.to}
                      onClick={() => setIsMobileNavMenuOpen(false)}
                      style={{
                        fontWeight:
                          subitem.to === location.pathname ? 'bold' : 'normal',
                      }}
                    >
                      {item.name} | {subitem.name}
                    </Link>
                  ))
                )
              )}
            </DropdownMenu>
          </Dropdown>
        </div>
        <div className="d-none d-sm-flex align-items-center">
          {menu.map((item, itemKey) =>
            !item.subitems ? (
              <NavLink
                key={item.name}
                to={item.to}
                exact={true}
                style={{ width: item.width }}
                activeStyle={{ fontWeight: 'bold' }}
              >
                {item.name}
              </NavLink>
            ) : (
              <div key={itemKey}>
                <Dropdown
                  isOpen={subItemMenuOpenMap[item.name]}
                  toggle={() =>
                    setSubItemMenuOpenMap((previous) => ({
                      ...previous,
                      [item.name]: !previous[item.name],
                    }))
                  }
                >
                  <DropdownToggle caret>
                    <NavLink
                      key={item.name}
                      to={
                        ['week', 'month', 'year', 'all']
                          .filter(
                            (period) => location.pathname === '/top/' + period
                          )
                          .join('') || '/top'
                      }
                      exact={true}
                      style={{ width: item.width }}
                      activeStyle={{ fontWeight: 'bold' }}
                      onClick={(e) => item.subitems && e.preventDefault()}
                    >
                      {item.name}
                      {['week', 'month', 'year', 'all']
                        .filter(
                          (period) => location.pathname === '/top/' + period
                        )
                        .map((period) => ' | ' + period)}
                    </NavLink>
                  </DropdownToggle>
                  <DropdownMenu>
                    {item.subitems?.map((item) => (
                      <NavLink
                        className="dropdown-item"
                        key={item.name}
                        to={item.to}
                        exact={true}
                        activeStyle={{ fontWeight: 'bold' }}
                        onClick={() => setSubItemMenuOpenMap({})}
                      >
                        {item.name}
                      </NavLink>
                    ))}
                  </DropdownMenu>
                </Dropdown>
              </div>
            )
          )}
        </div>
        <div style={{ flex: 1 }} />
        <div className="create-new-dweet">
          <NavLink
            to="/create"
            className="btn btn-primary d-flex align-items-center justify-content-center"
          >
            <span className="plus-icon"></span>
            <span className="create-new-dweet-label">
              New <span className="create-dweet-label">dweet</span>
            </span>
          </NavLink>
        </div>
        {context.user ? (
          <Dropdown
            isOpen={isUserMenuDropdownOpen}
            toggle={() => setIsUserMenuDropdownOpen(!isUserMenuDropdownOpen)}
            style={{ marginRight: -16, minWidth: 0 }}
            className="settings-dropdown"
          >
            <DropdownToggle
              style={{
                paddingLeft: 16,
                paddingRight: 16,
                width: '100%',
              }}
            >
              <UserView user={context.user} link={false} />
            </DropdownToggle>
            <DropdownMenu className="right">
              <Link
                className="dropdown-item"
                to={'/u/' + context.user.username + '/top'}
                onClick={() => {
                  setIsUserMenuDropdownOpen(false);
                }}
              >
                My dweets
              </Link>
              <Link
                className="dropdown-item"
                to={'/' + context.user.username + '/settings'}
                onClick={() => {
                  setIsUserMenuDropdownOpen(false);
                }}
              >
                Settings
              </Link>
              <div
                style={{
                  height: 1,
                  background: context.theme.secondaryBorderColor,
                  marginTop: 8,
                  marginBottom: 8,
                }}
              />
              <Link
                className="dropdown-item"
                to={'/'}
                onClick={(e) => {
                  e.preventDefault();
                  localStorage.removeItem('token');
                  localStorage.removeItem('user');
                  window.location.href = '/';
                }}
              >
                Log out
              </Link>
            </DropdownMenu>
          </Dropdown>
        ) : (
          <NavLink to="/accounts/login" exact={true} style={{ marginLeft: 15 }}>
            Log in
          </NavLink>
        )}
      </div>
    </header>
  );
}

CovidCard: React.FC<{
    holderState: HolderState,
    smartState: SmartState,
    uiState: UiState,
    displayQr: (vc) => Promise<void>,
    openScannerUi: () => Promise<void>,
    connectToIssuer: () => Promise<void>,
    connectToFhir: () => Promise<void>,
    dispatchToHolder: (e: Promise<any>) => Promise<void>
}> = ({ holderState, smartState, uiState, displayQr, openScannerUi, connectToFhir, connectToIssuer, dispatchToHolder }) => {
    const issuerInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'issuer').slice(-1)
    const issuerInteraction = issuerInteractions.length ? issuerInteractions[0] : null


    let currentStep = CardStep.CONFIGURE_WALLET;
    /* tslint:disable-next-line:prefer-conditional-expression */
    if (issuerInteraction?.status !== 'complete') {
        currentStep = CardStep.CONNECT_TO_ISSUER;
    } else {
        currentStep = CardStep.DOWNLOAD_CREDENTIAL;
    }
    if (holderState.vcStore.length) {
        currentStep = CardStep.COMPLETE
    }

    const retrieveVcClick = async () => {
        const onMessage = async ({ data, source }) => {
            const { verifiableCredential } = data
            window.removeEventListener("message", onMessage)
            await dispatchToHolder(receiveVcs(verifiableCredential, holderState))
        }
        window.addEventListener("message", onMessage)
        window.open(uiState.issuer.issuerDownloadUrl)
    }

    useEffect(() => {
        if (smartState?.access_token && holderState.vcStore.length === 0) {
            const credentials = axios.post(uiState.fhirClient.server + `/Patient/${smartState.patient}/$health-cards-issue`, {
                "resourceType": "Parameters",
                "parameter": [{
                    "name": "credentialType",
                    "valueUri": "https://smarthealth.cards#immunization"
                },{
                    "name": "presentationContext",
                    "valueUri": "https://smarthealth.cards#presentation-context-online"
                }, {
                    "name": "encryptForKeyId",
                    "valueString": "#encryption-key-1"
                }]
            })
            credentials.then(response => {
                const vcs = response.data.parameter.filter(p => p.name === 'verifiableCredential').map(p => p.valueString)
                dispatchToHolder(receiveVcs(vcs, holderState))
            })
        }
    }, [smartState])


    const covidVcs = holderState.vcStore.filter(vc => vc.type.includes("https://smarthealth.cards#covid19"));

    const resources = covidVcs.flatMap(vc =>
        vc.vcPayload.vc.credentialSubject.fhirBundle.entry
            .flatMap(e => e.resource))

    const doses = resources.filter(r => r.resourceType === 'Immunization').length;
    const patient = resources.filter(r => r.resourceType === 'Patient')[0];
    console.log("P", patient);


    useEffect(() => {
        if (covidVcs.length === 0) {
            return;
        }
        let file = new File([JSON.stringify({
            "verifiableCredential": covidVcs.map(v => v.vcSigned)
        })], "c19.smart-health-card", {
            type: "application/smart-health-card"
        })
        const url = window.URL.createObjectURL(file);
        setDownloadFileUrl(url)
    }, [covidVcs.length])
    const [downloadFileUrl, setDownloadFileUrl] = useState("");

    return <> {
        currentStep === CardStep.COMPLETE && <Card style={{ border: "1px solid grey", padding: ".5em", marginBottom: "1em" }}>
            <CardTitle style={{ fontWeight: "bolder" }}>
                COVID Cards ({covidVcs.length})
                </CardTitle>

            <CardSubtitle className="text-muted">Your COVID results are ready to share, based on {" "}
                {resources && <>{resources.length} FHIR Resource{resources.length > 1 ? "s" : ""} <br /> </>}
            </CardSubtitle>
            <ul>
                <li> Name: {patient.name[0].given[0]} {patient.name[0].family}</li>
                <li> Birthdate: {patient.birthDate}</li>
                <li> Immunization doses received: {doses}</li>
            </ul>
            <Button className="mb-1" color="info" onClick={() => displayQr(covidVcs[0])}>Display QR</Button>
            <a href={downloadFileUrl} download="covid19.smart-health-card">Download file</a>
        </Card>
    } {currentStep < CardStep.COMPLETE &&
        <Card style={{ border: ".25em dashed grey", padding: ".5em", marginBottom: "1em" }}>
            <CardTitle>COVID Cards </CardTitle>
            <CardSubtitle className="text-muted">You don't have any COVID cards in your wallet yet.</CardSubtitle>

            <Button disabled={true} className="mb-1" color="info">
                {currentStep > CardStep.CONFIGURE_WALLET && '✓ '} 1. Set up your Health Wallet</Button>

            <RS.UncontrolledButtonDropdown className="mb-1" >
                <DropdownToggle caret color={currentStep === CardStep.CONNECT_TO_ISSUER ? 'success' : 'info'} >
                    {currentStep > CardStep.CONNECT_TO_ISSUER && '✓ '}
                                    2. Get your Vaccination Credential
                                </DropdownToggle>
                <DropdownMenu style={{ width: "100%" }}>
                    <DropdownItem onClick={connectToFhir} >Connect with SMART on FHIR </DropdownItem>
                    <DropdownItem >Load from file (todo)</DropdownItem>
                </DropdownMenu>
            </RS.UncontrolledButtonDropdown>
            <Button
                disabled={currentStep !== CardStep.DOWNLOAD_CREDENTIAL}
                onClick={retrieveVcClick}
                className="mb-1"
                color={currentStep === CardStep.DOWNLOAD_CREDENTIAL ? 'success' : 'info'} >
                3. Save COVID card to wallet</Button>
        </Card>
        }
    </>

}