import React from "react";
import Image from "next/image";
import styled from "styled-components";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";
import colors from "@theme/colors";
import Post from "@models/Feed";
import { TextSection, ChangeLanguageButton } from "@components/index";
import MarkdownStyles from "@views/common/MarkdownStyles";
import LoadingView from "@views/common/LoadingView";
import { useTranslation } from "../../i18n";

interface FeedPageViewProps {
  post?: Post;
}

const StyledTextSection = styled(TextSection)`
  align-items: center;

  & > h1 {
    color: ${colors.darkBlue};
    p {
      color: ${colors.orange1};
    }
  }

  & > div {
    margin: auto;
  }
`;

const Content = styled(MarkdownStyles)`
  margin-top: 1.5rem;
`;

const LngButton = styled(ChangeLanguageButton)`
  align-self: flex-end;
  margin-right: 1rem;
`;

const FeedPageView: React.FC<FeedPageViewProps> = ({ post }) => {
  const { i18n } = useTranslation();
  if (!post) return <LoadingView />;
  const { language } = i18n;
  const isFi = language === "fi";
  const {
    title, description, content,
  } = {
    title: isFi ? post.title_fi : post.title_en,
    description: isFi ? post.description_fi : post.description_en,
    content: isFi ? post.content_fi : post.content_en,
  };

  return (
    <>
      <LngButton />
      <StyledTextSection>
        <h1>
          {title}
          <p>
            {description}
          </p>
          {post.image && (
          <Image
            src={post.image}
            alt={title}
            objectFit="scale-down"
            layout="responsive"
            width={16}
            height={9}
          />
          )}
        </h1>
        <div>
          <Content rehypePlugins={[rehypeRaw, rehypeSanitize]}>{content}</Content>
        </div>
      </StyledTextSection>
    </>
  );
};
export default FeedPageView;
