import { cx } from "../class-names.ts";
import type { SyncState } from "../store/index.tsx";
import { icon, syncTheme } from "./style.css.ts";

export { syncTheme };

function Icon(props: { variant: SyncState }) {
  switch (props.variant) {
    case "IDLE": {
      return (
        <g className={icon.group}>
          <circle className={icon.idle} />

          <path
            d="M9.0026 14L16.0737 6.92893L14.6595 5.51472L9.0026 11.1716L6.17421 8.3431L4.75999 9.7574L9.0026 14Z"
            className={icon.shape}
          />
        </g>
      );
    }

    case "AUTHENTICATING":
    case "WAITING": {
      return (
        <g className={icon.group}>
          <circle className={icon.syncing} />

          <g>
            <circle cx="14" cy="10" className={icon.bounce} />
            <circle cx="10" cy="10" className={icon.bounce} />
            <circle cx="6" cy="10" className={icon.bounce} />
          </g>
        </g>
      );
    }

    case "SYNCING": {
      return (
        <g className={icon.group}>
          <circle className={icon.idle} />

          <path
            d="M14.8201 15.0761C16.1628 13.8007 17 11.9981 17 10C17 6.13401 13.866 3 10 3C8.9391 3 7.9334 3.23599 7.03241 3.65834L8.0072 5.41292C8.6177 5.14729 9.2917 5 10 5C12.7614 5 15 7.23858 15 10H12L14.8201 15.0761ZM12.9676 16.3417L11.9928 14.5871C11.3823 14.8527 10.7083 15 10 15C7.23858 15 5 12.7614 5 10H8L5.17993 4.92387C3.83719 6.19929 3 8.0019 3 10C3 13.866 6.13401 17 10 17C11.0609 17 12.0666 16.764 12.9676 16.3417Z"
            className={icon.shape}
          />
        </g>
      );
    }

    case "ERROR": {
      return (
        <g className={icon.group}>
          <circle className={icon.error} />

          <path
            d="M10 8.58579L7.17157 5.75735L5.75736 7.17156L8.5858 9.99999L5.75736 12.8284L7.17157 14.2426L10 11.4142L12.8284 14.2426L14.2426 12.8284L11.4142 9.99999L14.2426 7.17156L12.8284 5.75735L10 8.58579Z"
            className={icon.shape}
          />
        </g>
      );
    }

    case "INACTIVE": {
      return (
        <g className={icon.group}>
          <circle className={icon.inactive} />

          <path
            d="M9 13V15H11V13H9ZM11 11.3551C12.4457 10.9248 13.5 9.5855 13.5 8C13.5 6.067 11.933 4.5 10 4.5C8.302 4.5 6.88637 5.70919 6.56731 7.31346L8.5288 7.70577C8.6656 7.01823 9.2723 6.5 10 6.5C10.8284 6.5 11.5 7.17157 11.5 8C11.5 8.8284 10.8284 9.5 10 9.5C9.4477 9.5 9 9.9477 9 10.5V12H11V11.3551Z"
            className={icon.shape}
          />
        </g>
      );
    }

    default: {
      return null;
    }
  }
}

/**
 * Given {@link SyncState}, will render the appropriate matching icon.
 *
 * You can use {@link syncTheme} to configure its colors. Generally, you would
 * do that at the top level in a Vanilla Extract (.css.ts) file
 * using `assignVars`.
 *
 * @example
 * ```ts
 * globalStyle(":root", {
 *   vars: assignVars(syncTheme, {
 *     idle: vars.color.blue,
 *     inactive: vars.color.gray,
 *     syncing: vars.color.blue,
 *     error: vars.color.red,
 *   }),
 * )];
 * ```
 *
 * It is also possible to use inline styles to set the vars if it's necessary.
 */

export function SyncIcon(props: {
  status: SyncState;
  title?: string;
  className?: string;
}) {
  const { status, title } = props;

  return (
    <svg
      {...cx(props, icon.container({ rotate: status === "SYNCING" }))}
      width="20px"
      height="20px"
      viewBox="0 0 20 20"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <title>{title}</title>
      <Icon variant={status} />
    </svg>
  );
}
