import {
  Calendar,
  Button,
  SpaceBetween,
  Container,
  Header,
} from "@cloudscape-design/components";
import { useState } from "react";
import { FormattedDate } from "react-intl";
import { Link } from "react-router";

export const SignUp = () => {
  const [selectedDate, setSelectedDate] = useState<string | null>(null);
  const tuesday = 2;
  const thursday = 4;
  const isDateEnabled = (date: Date) =>
    [tuesday, thursday].includes(date.getDay());
  const availableSlots: number = 3;
  const availableTokens: number = 0;

  return (
    <SpaceBetween size="s" alignItems={"center"}>
      <Container>
        <Header>Pick a date</Header>
        <Calendar
          value={selectedDate || ""}
          onChange={(e) => setSelectedDate(e.detail.value)}
          isDateEnabled={isDateEnabled}
        />
        {selectedDate && (
          <>
            <Header>
              <FormattedDate
                value={selectedDate}
                day="numeric"
                month="long"
                year="numeric"
              />
            </Header>
            {availableSlots === 0 ? (
              <p>There are no available slots for this date.</p>
            ) : (
              <>
                <p>There are {availableSlots} available slots for this date.</p>
                <Button disabled={!availableTokens}>Sign up</Button>
              </>
            )}
          </>
        )}
      </Container>
      {!availableTokens && (
        <Container>
          <p>
            You don't have any tokens to sign up to a slot, please buy here.
          </p>
          <Button>
            <Link to="/buy" style={{ textDecoration: "none" }}>
              Buy
            </Link>
          </Button>
        </Container>
      )}
    </SpaceBetween>
  );
};