@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleFeedback/FAQArticleFeedback.js

// @flow

import * as React from 'react';
import Stack from '@kiwicom/orbit-components/lib/Stack';

import ScreenVoting from './ScreenVoting';
import ScreenFeedback from './ScreenFeedback';
import ScreenAdditionalFeedback from './ScreenAdditionalFeedback';
import ScreenThankyou from './ScreenThankyou';
import ScreenError from './ScreenError';
import screenList from './screenList';
import ContactUsLink from '../../../SmartFAQ/common/ContactUsLink/ContactUsLink';
import UserStatus from '../../../SmartFAQ/helpers/UserStatus';

type Props = {
  articleId: string,
};

type ScreenState = [
  $Values<typeof screenList>,
  (
    | (($Values<typeof screenList>) => $Values<typeof screenList>)
    | $Values<typeof screenList>,
  ) => void,
];

type CommentState = [string, ((string => string) | string) => void];

const FAQArticleFeedback = ({ articleId }: Props) => {
  const [screen, setScreen]: ScreenState = React.useState(screenList.VOTING);
  const [commentType, setCommentType]: CommentState = React.useState('');

  const renderScreen = () => {
    switch (screen) {
      case screenList.VOTING:
        return <ScreenVoting articleId={articleId} changeScreen={setScreen} />;
      case screenList.FEEDBACK:
        return (
          <ScreenFeedback
            changeScreen={setScreen}
            handleCommentTypeChange={setCommentType}
            commentType={commentType}
          />
        );
      case screenList.ADDITIONAL_FEEDBACK:
        return (
          <ScreenAdditionalFeedback
            articleId={articleId}
            changeScreen={setScreen}
            commentType={commentType}
            setCommentType={setCommentType}
          />
        );
      case screenList.THANK_YOU:
        return <ScreenThankyou changeScreen={setScreen} />;
      case screenList.ERROR:
        return <ScreenError changeScreen={setScreen} />;
      case screenList.COMMENT_LIMIT_REACHED:
        return <ScreenError commentLimitReached changeScreen={setScreen} />;
    }
    return <ScreenVoting articleId={articleId} changeScreen={setScreen} />;
  };

  return (
    <Stack>
      <div data-test="FAQArticleForm">{renderScreen()}</div>
      <UserStatus.LoggedIn>
        <ContactUsLink
          translationKey={__('smartfaq.faq.article.contact_page_link')}
          justify="center"
          type="secondary"
        />
      </UserStatus.LoggedIn>
    </Stack>
  );
};

export default FAQArticleFeedback;