import { defineComponent, Ref, ref } from 'vue';
import { logService } from '@jdbernard/logging';
import {
  default as api,
  EventProposalModel,
  newEventProposal,
} from '@/api-client';

import {
  CircleCheckIcon,
  CircleCrossIcon,
  HourGlassIcon,
  SpinnerIcon,
} from '@/components/svg';

const logger = logService.getLogger('/propose-events');

type FormState =
  | 'loading'
  | 'ready'
  | 'submitting'
  | 'invalid'
  | 'success'
  | 'error';

export default defineComponent({
  name: 'TheProposeEventView',
  props: {},
  components: { CircleCheckIcon, CircleCrossIcon, HourGlassIcon, SpinnerIcon },
  setup: function TheProposeEventView() {
    const departments: Ref<{ value: string; color: string }[]> = ref([]);
    const formState: Ref<FormState> = ref('loading');

    setTimeout(async () => {
      departments.value = (await api.getEventProposalConfig()).departments;
      formState.value = 'ready';
    });

    const formVal = { event: newEventProposal() };
    const successes: string[] = [];
    const errors: string[] = [];

    function validateEvent(ev: EventProposalModel): boolean {
      return (
        !!ev.name &&
        !!ev.description &&
        !!ev.purpose &&
        !!ev.department &&
        !!ev.location &&
        !!ev.owner
      );
    }

    async function proposeEvent(): Promise<void> {
      if (!validateEvent(formVal.event)) {
        formState.value = 'invalid';
        return;
      }

      formState.value = 'submitting';
      logger.trace({ formState: formState.value });
      if (await api.proposeEvent(formVal.event)) {
        formState.value = 'success';
        successes.push(
          `We've recorded the proposed details for ${formVal.event.name}.`
        );
      } else {
        formState.value = 'error';
        errors.push(
          'We were unable to record the proposed details for ' +
            formVal.event.name +
            ". Poke Jonathan and tell him it's broken."
        );
      }

      setTimeout(() => {
        formVal.event = newEventProposal();
        formState.value = 'ready';
      }, 5000);
    }

    return { departments, errors, formState, formVal, successes, proposeEvent };
  },
});