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

export function validURL(str) {
  var 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 renderPossibleURLField(field) {
  if (validURL(field)) {
    return (
      <Link href={field}>
        <a target="_blank">
          <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition">
            {field}
          </div>
        </a>
      </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-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
        {field}
      </div>
    );
  }
}

export default function PartnerCard({ src, alt, url, fields, bio, user }) {
  const finalsrc = Boolean(src) ? src : "/images/logo.png";
  let bioarray = bio.split("\n");
  bioarray = bioarray.slice(0, bioarray.length - 1);
  const biodict = Object.assign({}, bioarray);

  return (
    <div className="p-4 flex-column space-y-4 break-all group rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
      <Link href={url}>
        <a target="_blank">
          <div className="p-4 flex rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
            <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 sm:text-sm text-xs text-center space-y-4">
              <div className="p-2 rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
                {Object.keys(biodict).map((bio) => (
                  <div key={bio}>
                    {biodict[bio] == "" ? <br /> : biodict[bio]}
                  </div>
                ))}
                {`- @${user}`}
              </div>
            </div>
          </div>
        </a>
      </Link>
      <div className="flex-column space-y-4">
        {Object.keys(fields).map((field) => (
          <div className="grid grid-cols-2 space-x-4" key={field}>
            <div className="order-1">{renderPossibleURLField(field)}</div>
            <div className="order-2">
              {renderPossibleURLField(fields[field])}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}