"use client";
import { ButtonPrimary } from "components/Buttons";
import { BlueskyTiny } from "components/Icons/BlueskyTiny";
import { Popover } from "components/Popover";
import Link from "next/link";
import { HandleInput } from "./HandleInput";
const logos = {
  Anisota: "/logos/anisota.svg",
  Blacksky: "/logos/blacksky.svg",
  Blento: "/logos/blento.svg",
  Bluesky: "/logos/bluesky.svg",
  Cartridge: "/logos/cartridge.svg",
  Eurosky: "/logos/eurosky.svg",
  Graze: "/logos/graze.svg",
  Leaflet: "/logos/leaflet.svg",
  Margin: "/logos/margin.svg",
  Offprint: "/logos/offprint.svg",
  Pckt: "/logos/pckt.svg",
  pdsls: "/logos/pdsls.svg",
  "plyr.fm": "/logos/plyr.fm.svg",
  Popfeed: "/logos/popfeed.svg",
  Roomy: "/logos/roomy.svg",
  Semble: "/logos/semble.svg",
  Sill: "/logos/sill.svg",
  Spark: "/logos/spark.svg",
  Surf: "/logos/surf.svg",
  Tangled: "/logos/tangled.svg",
};

import { Separator } from "components/Layout";

export const SubscribeWithHandle = (props: {
  autoFocus?: boolean;
  user: {
    loggedIn: boolean;
    email: string | undefined;
    handle: string | undefined;
  };
}) => {
  if (props.user.loggedIn && props.user.handle) {
    return (
      <ButtonPrimary className="mx-auto max-w-full">
        <span className="shrink-0">Subscribe as</span>
        <span className="flex gap-1 items-center max-w-full grow min-w-0">
          <div className="w-4 h-4 shrink-0 rounded-full bg-test" />

          <div className="grow truncate">{props.user.handle}</div>
        </span>
      </ButtonPrimary>
    );
  } else
    return (
      <div className="max-w-sm mx-auto w-full ">
        <HandleInput autoFocus={props.autoFocus} />
        <div className="flex gap-2 justify-center items-center mx-auto pt-0.5 ">
          <AtmosphericHandleInfo />
          <Separator classname="h-3! border-accent-contrast!" />
          <div className="text-sm text-accent-contrast font-bold">Create</div>
        </div>
      </div>
    );
};

export const LinkHandle = (props: { compact?: boolean }) => {
  return (
    <div
      className={`flex flex-col text-center justify-center ${props.compact ? "gap-3" : "gap-4"}`}
    >
      <div
        className={`text-secondary flex flex-col ${props.compact && "text-sm leading-snug"}`}
      >
        <h4 className={`${props.compact && "text-sm"}`}>
          Link your universal handle
        </h4>
        <div className="text-tertiary">
          to comment, recommend, and see what your friends are reading
        </div>
        <AtmosphericHandleInfo />
      </div>
      <HandleInputandOAuth link compact />
    </div>
  );
};

export const HandleInputandOAuth = (props: {
  link?: boolean;
  compact?: boolean;
}) => {
  return (
    <div className="handleInputAndOAuth flex flex-col">
      <HandleInput action="link" />
      <div
        className={`${props.compact ? "mt-1 mb-2 text-xs" : "text-sm mt-2 mb-3"} w-full flex gap-2 items-center`}
      >
        <hr className="grow border-border-light" />
        <div className="shrink-0 text-tertiary">
          or {props.link ? "link with" : "sign in via"}
        </div>
        <hr className="grow border-border-light" />
      </div>
      <ButtonPrimary
        compact={props.compact}
        className={`${props.compact && "text-sm"} `}
        fullWidth
      >
        <BlueskyTiny /> Bluesky
      </ButtonPrimary>
    </div>
  );
};

export const AtSubscribeSuccess = (props: {}) => {
  return (
    <div className="flex flex-col text-center justify-center p-4 text-secondary max-w-md">
      <h2 className="text-primary pb-1">You've Subscribed!</h2>
      You'll recieve new posts in the <br />
      <Link href={"/reader"}>Leaflet Reader</Link>
      <br />
      <span className="text-tertiary text-sm">
        or any standard.site enabled reader!
      </span>
      <hr className="my-4 border-border-light" />
      <div className="flex flex-col">
        <h4>Other ways to follow</h4>
        <Link href="">Get the RSS Feed</Link>
        <Link href="">Pin Custom Feed in Bluesky</Link>
      </div>
    </div>
  );
};

export const AtmosphericHandleInfo = (props: { trigger?: React.ReactNode }) => {
  return (
    <Popover
      className="z-100! max-w-sm flex flex-col"
      trigger={
        props.trigger ? (
          props.trigger
        ) : (
          <div className="text-accent-contrast text-sm">
            What's the Atmosphere
          </div>
        )
      }
    >
      <div className="font-bold text-secondary pb-1">
        The Atmosphere is a growing ecosystem of social apps, like Leaflet and
        Bluesky.
        <br />
      </div>
      <div className="pb-3  font-bold text-secondary">
        One account gets you into <em>all</em> of them.
      </div>

      <div className=" text-sm text-tertiary uppercase">
        Apps on the Atmosphere!
      </div>
      <div className="opaque-container pt-3 pb-2 overflow-hidden">
        <div className="logo-scroll-track flex w-max">
          {(
            [
              "Leaflet", "Bluesky", "Blacksky", "Eurosky", "Tangled",
              "Semble", "Surf", "Spark", "Pckt", "pdsls", "plyr.fm",
              "Popfeed", "Roomy", "Sill", "Offprint", "Margin",
              "Anisota", "Blento", "Cartridge", "Graze",
              "Leaflet", "Bluesky", "Blacksky", "Eurosky", "Tangled",
              "Semble", "Surf", "Spark", "Pckt", "pdsls", "plyr.fm",
              "Popfeed", "Roomy", "Sill", "Offprint", "Margin",
              "Anisota", "Blento", "Cartridge", "Graze",
            ] as (keyof typeof logos)[]
          ).map((name, i) => (
            <AtApp key={i} logo={logos[name]} name={name} />
          ))}
        </div>
      </div>

      <ButtonPrimary fullWidth className=" mt-3 mx-auto mb-3 mt-1">
        Sign up via Bluesky!
      </ButtonPrimary>
    </Popover>
  );
};

const AtApp = (props: { logo: string; name: string }) => {
  return (
    <div className="w-20 flex-shrink-0 flex flex-col gap-2 justify-center text-tertiary font-bold text-sm text-center">
      <img src={props.logo} alt={props.name} className="w-12 h-12 mx-auto" />
      {props.name}
    </div>
  );
};