import React from "react";
import styled from "styled-components";
import { theme } from "../../../../css/globalStyle";
import { IoIosCheckmarkCircle } from "react-icons/io";
import { IoWarning } from "react-icons/io5";
// By default, the Parent takes up the whole space of the SubmittingContainer
// parent. This is so they can't click buttons underneath this Loader.

const Parent = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: ${theme.color.grey[900]};
  position: absolute;
  top: 0px;
  opacity: 0.7;
`;

const Inner = styled.div.attrs({
  className: "animate__animated animate__fadeInUp faster"
})`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

interface Props {
  submitError: any;
  successText: any;
  additionalStyles?: any;
}

export const SubmittingResult = ({
  additionalStyles,
  submitError,
  successText
}: Props) => {
  return (
    <Parent style={additionalStyles}>
      <Inner>
        {submitError.message === null && (
          <IoIosCheckmarkCircle size="25px" color={theme.color.success[500]} />
        )}
        {submitError.message !== null && (
          <IoWarning size="25px" color={theme.color.error[500]} />
        )}

        <div style={{ marginTop: "10px", textAlign: "center" }}>
          {submitError.message || successText}
        </div>
      </Inner>
    </Parent>
  );
};
