import Link from "next/link";
import Image from "next/image";

export function validURL(str) {
  const pattern = new RegExp(
    "^(https?:\\/\\/)?" + // protocol
      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
      "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
      "(\\:\\d+)?(\\/[-a-z\\d%_.~+$]*)*" + // port and path
      "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
      "(\\#[-a-z\\d_]*)?$",
    "i"
  ); // fragment locator
  return !!pattern.test(str);
}

export function replaceWithImageTags(index, str, emoji_path) {
  if (index % 2 === 0) {
    return <p className="inline">{`${str}`}</p>;
  } else {
    return (
      <>
        <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
          <Image src={emoji_path} layout="fill" objectFit="contain" alt={str} />
        </span>
      </>
    );
  }
}

export function formatCustomEmoji(str, emoji_paths) {
  const emoji_pattern = new RegExp(/(:[A-Za-z_-]+:)/, "g");
  const values = emoji_pattern[Symbol.split](str);
  if (Boolean(emoji_paths)) {
    return (
      <>
        {Object.keys(values).map((v) =>
          replaceWithImageTags(v, values[v], emoji_paths[values[v]])
        )}
      </>
    );
  } else {
    return <></>;
  }
}

export function renderPossibleURLField(field, emoji_paths) {
  if (validURL(field)) {
    return (
      <Link href={field} target="_blank">
        <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
          {field}
        </div>
      </Link>
    );
  } else {
    return (
      <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-alice-werefox-red-dark dark:ring-alice-werefox-red group-hover:ring-alice-werefox-blue-dark dark:group-hover:ring-alice-werefox-blue">
        {formatCustomEmoji(field, emoji_paths)}
      </div>
    );
  }
}

export function renderPossibleFields(fields, emoji_paths) {
  if (Boolean(fields)) {
    return Object.keys(fields).map((field) => (
      <div className="grid grid-cols-2 space-x-4" key={field}>
        <div className="order-1">
          {renderPossibleURLField(field, emoji_paths)}
        </div>
        <div className="order-2">
          {renderPossibleURLField(fields[field], emoji_paths)}
        </div>
      </div>
    ));
  } else {
    return <></>;
  }
}

export function renderPossibleBio(bio, emoji_paths) {
  if (Boolean(bio)) {
    let bioarray = bio.split("\n");
    bioarray = bioarray.slice(0, bioarray.length - 1);
    const biodict = Object.assign({}, bioarray);
    return Object.keys(biodict).map((bio) => (
      <div key={bio}>
        {biodict[bio] == "" ? (
          <br />
        ) : (
          formatCustomEmoji(biodict[bio], emoji_paths)
        )}
      </div>
    ));
  } else {
    return <></>;
  }
}

export default function PartnerCard({
  src,
  alt,
  url,
  fields,
  bio,
  user,
  emoji_paths,
}) {
  const finalsrc = Boolean(src) ? src : "/images/logo.png";

  return (
    <div className="p-4 flex-column space-y-4 sm:break-normal break-all sm:text-sm text-xs text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
      <Link href={url} target="_blank">
        <div className="p-4 flex group rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
          <div className="order-1 flex-1 flex-shrink-0 relative items-center justify-center align-middle sm:w-32 w-16 min-h-full mr-4">
            <Image src={finalsrc} layout="fill" objectFit="contain" alt={alt} />
          </div>
          <div className="order-2 flex-5 space-y-4">
            <div className="p-2 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red group-hover:ring-alice-werefox-blue-dark dark:group-hover:ring-alice-werefox-blue">
              {renderPossibleBio(bio, emoji_paths)}
              {`- @${user}`}
            </div>
          </div>
        </div>
      </Link>
      <div className="flex-column space-y-4 break-all text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
        {renderPossibleFields(fields, emoji_paths)}
      </div>
    </div>
  );
}