import { FC } from "react";
import { useSearchParams } from "react-router-dom";

import { BuilderLinkButton } from "../../../Shared/components/common/LinkButton";

interface InvalidCharacterProps {
  builderUrl: string;
  isReadonly: boolean;
}

export const InvalidCharacter: FC<InvalidCharacterProps> = ({
  builderUrl,
  isReadonly,
}) => {
  const [searchParams] = useSearchParams();
  const isVttView = searchParams.get("view") === "vtt";
  const sendToNonVttBuilderUrl = builderUrl.replace("view=vtt", "");

  return (
    <div className="ct-invalid-character">
      <h2>Character Not Ready!</h2>

      <p>
        The current character is not accessible because it is missing either a{" "}
        <strong>Species</strong>, <strong>Class</strong> or{" "}
        <strong>Ability Scores</strong>.
      </p>

      {!isReadonly && (
        <>
          <p>
            Return to the character builder to complete the character creation
            process.
          </p>

          <p>
            <BuilderLinkButton
              url={isVttView ? sendToNonVttBuilderUrl : builderUrl}
              className="ct-invalid-character__button"
              size="oversized"
              target={isVttView ? "_blank" : undefined}
            >
              Character Builder
            </BuilderLinkButton>
          </p>
        </>
      )}
    </div>
  );
};