import React from "react";
import styled from "styled-components";
import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
import { SignupForm } from "@models/Signup";
import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
import { TextSection } from "@components/index";
import { colors } from "@theme/colors";
import FormWrapper from "@views/common/FormWrapper";
import Loader from "@components/Loader";
import { buildFormSchema, buildUISchema } from "./FormUtils";

const customWidgets = {
  radio: RadioButtonWidget,
  checkboxes: Checkboxes,
};

interface SignUpPageViewProps {
  signUpForm: SignupForm;
  formData: any;
  onChange: (e: IChangeEvent<unknown>, es?: ErrorSchema) => unknown;
  onSubmit: (e: ISubmitEvent<unknown>) => unknown;
}

const renderList = (signUpForm: SignupForm) => (
  <aside>
    <div>
      <h6>
        Ilmoittautuneet{signUpForm.quota > 0 && (` (${signUpForm.signups.length}/${signUpForm.quota})`)}:
      </h6>
      <ol>
        {signUpForm.signups.map((s, idx) => (
          <li key={idx} className={signUpForm.quota && idx + 1 > signUpForm.quota ? "reserved" : ""}>{s}</li>
        ))}
      </ol>
    </div>
  </aside>
);

const StyledSection = styled(TextSection)`
  & > div {
    & > span {
      color: ${colors.orange1};
    }
  }

  & > aside {
    justify-content: start;
    li {
      padding-bottom: 0.3rem;
    }

    .reserved {
      color: ${colors.blue1};
    }
  }

  ${Loader} {
    margin: auto;
  }
`;

const SignUpPageView: React.FC<SignUpPageViewProps> = ({
  signUpForm,
  formData,
  onChange,
  onSubmit,
}) => {
  const renderForm = () => {
    const schema = buildFormSchema(signUpForm);
    const uiSchema = buildUISchema(signUpForm);

    return (
      <FormWrapper
        schema={schema as any}
        uiSchema={uiSchema}
        formData={formData}
        widgets={customWidgets}
        idPrefix="rjsf"
        onChange={onChange}
        onSubmit={onSubmit}
      />
    );
  };

  let form: JSX.Element;
  let signups: JSX.Element = null;
  const startTime = new Date(signUpForm?.start_time);
  const endTime = new Date(signUpForm?.end_time);

  if (!signUpForm) {
    // Show loader if in edit mode and form has not yet loaded.
    // For normal signup page, form is always defined on this level.
    form = (
      <Loader $color={colors.darkBlue} />
    );
  } else if (startTime > new Date()) {
    form = (
      <>
        <p>Ilmoittauminen ei ole vielä auennut!</p>
        <p>Se aukeaa {startTime.toLocaleString("fi-FI")}.</p>
      </>
    );
  } else if (new Date() > endTime) {
    form = (
      <p>Ilmoittauminen on umpeutunut!</p>
    );
    signups = renderList(signUpForm);
  } else {
    form = renderForm();
    signups = renderList(signUpForm);
  }

  return (
    <StyledSection>
      <h1>
        {signUpForm && (
          signUpForm.title_fi
        )}
      </h1>

      <div>
        {form}
      </div>
      {signups}
    </StyledSection>
  );
};

export default SignUpPageView;
