import React from "react";
import styled from "styled-components";
import { createMessage, EDIT_APP, FORK_APP, SIGN_IN } from "constants/messages";
import { ANONYMOUS_USERNAME } from "constants/userConstants";
import { getTypographyByKey } from "constants/DefaultTheme";
import Button from "components/ads/Button";
import ForkApplicationModal from "pages/Applications/ForkApplicationModal";

const Cta = styled(Button)`
  ${(props) => getTypographyByKey(props, "btnLarge")}
  height: 100%;
`;

const ForkButton = styled(Cta)`
  svg {
    transform: rotate(-90deg);
  }
  height: ${(props) => `calc(${props.theme.smallHeaderHeight})`};
`;

const getAppViewerHeaderCTA = ({
  url,
  canEdit,
  currentApplicationDetails,
  currentUser,
  forkUrl,
  loginUrl,
}: any) => {
  let CTA = null;

  if (url && canEdit) {
    CTA = (
      <Cta
        className="t--back-to-editor"
        href={url}
        icon="arrow-left"
        text={createMessage(EDIT_APP)}
      />
    );
  } else if (
    currentApplicationDetails?.forkingEnabled &&
    currentApplicationDetails?.isPublic
  ) {
    if (currentUser?.username === ANONYMOUS_USERNAME) {
      CTA = (
        <ForkButton
          className="t--fork-app"
          href={forkUrl}
          text={createMessage(FORK_APP)}
          icon="fork"
        />
      );
    } else {
      CTA = (
        <div className="header__application-fork-btn-wrapper t--fork-btn-wrapper">
          <ForkApplicationModal applicationId={currentApplicationDetails.id} />
        </div>
      );
    }
  } else if (
    currentApplicationDetails?.isPublic &&
    currentUser?.username === ANONYMOUS_USERNAME
  ) {
    CTA = (
      <Cta
        className="t--sign-in"
        href={loginUrl}
        text={createMessage(SIGN_IN)}
      />
    );
  }

  return CTA;
};

export default getAppViewerHeaderCTA;