import React, { useCallback } from "react";
import { Grid, Collapse, IconButton } from "@material-ui/core";
import Alert from "@material-ui/lab/Alert";
import { useSelector, useDispatch } from "react-redux";
import { SurveyData, SurveyState } from "../../../store/Survey/types";
import {
  surveyErrorSelector,
  surveyAddRequest,
} from "../../../store/Survey/surveySlice";
import { userInfoSelector } from "../../../store/User/userSlice";
import Form from "../../../common/SurveyForm";

const SurveyForm = ({ siteId, timeZone, changeTab }: SurveyFormProps) => {
  const user = useSelector(userInfoSelector);
  const surveyError = useSelector(surveyErrorSelector);

  const dispatch = useDispatch();

  const onSubmit = useCallback(
    (
      diveDateTime: string,
      diveLocation: SurveyState["diveLocation"],
      weatherConditions: SurveyData["weatherConditions"],
      comments: string
    ) => {
      const surveyData: SurveyData = {
        site: siteId,
        diveDate: diveDateTime,
        diveLocation,
        weatherConditions,
        comments,
        token: user?.token,
      };
      dispatch(
        surveyAddRequest({
          siteId: `${siteId}`,
          surveyData,
          changeTab,
        })
      );
    },
    [dispatch, changeTab, siteId, user]
  );

  return (
    <>
      <Grid item xs={12}>
        <Collapse in={!!surveyError}>
          <Alert
            severity="error"
            action={
              <IconButton aria-label="close" color="inherit" size="small" />
            }
          >
            There was an error creating the survey.
          </Alert>
        </Collapse>
      </Grid>
      <Form siteId={siteId} timeZone={timeZone} onSubmit={onSubmit} />
    </>
  );
};

interface SurveyFormProps {
  changeTab: (index: number) => void;
  siteId: number;
  timeZone?: string | null;
}

SurveyForm.defaultProps = {
  timeZone: null,
};

export default SurveyForm;