import 'tippy.js/dist/tippy.css';
import 'tippy.js/themes/light-border.css';
import 'tippy.js/animations/scale-subtle.css';
import 'tippy.js/animations/perspective-subtle.css';

import Tippy from '@tippyjs/react';
import {inlinePositioning} from 'tippy.js';
import {useState} from 'react';
import {Check, ArrowRight, GitHub, Heart} from 'react-feather';
import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
import Link from 'next/link';
import Head from 'next/head';
import DropdownExample from '../components/DropdownExample.js';
import cn from 'classnames';
import {StaticCode} from '../components/Code';

import Logo from '../assets/logo.svg';

function Placement() {
  const [placement, setPlacement] = useState('top');

  return (
    <div className="mb-4 grid lg:grid-cols-12 gap-8 bg-gradient-to-r from-blue-800 to-purple-700 rounded-lg px-4 py-8 sm:p-8">
      <div className="lg:col-span-7 overflow-hidden">
        <h3 className="text-3xl text-gray-50 font-bold mb-4">
          Placement
        </h3>
        <p className="text-2xl text-blue-200 mb-4">
          Position your floating element on 12 core placements.
        </p>
        <div className="rounded-lg bg-gray-800 p-4 overflow-auto w-full">
          <StaticCode placement={placement} />
        </div>
      </div>
      <div className="grid lg:col-span-5 relative items-center bg-gray-800 rounded-lg h-128 lg:h-auto">
        <div className="text-center">
          {[
            {
              placement: 'top',
              styles: {
                left: 'calc(50% - 10px - 1rem)',
                top: 25,
              },
            },
            {
              placement: 'top-start',
              styles: {
                left: 'calc(50% - 70px - 1rem)',
                top: 25,
              },
            },
            {
              placement: 'top-end',
              styles: {
                left: 'calc(50% + 50px - 1rem)',
                top: 25,
              },
            },
            {
              placement: 'bottom',
              styles: {
                left: 'calc(50% - 10px - 1rem)',
                bottom: 25,
              },
            },
            {
              placement: 'bottom-start',
              styles: {
                left: 'calc(50% - 70px - 1rem)',
                bottom: 25,
              },
            },
            {
              placement: 'bottom-end',
              styles: {
                left: 'calc(50% + 50px - 1rem)',
                bottom: 25,
              },
            },
            {
              placement: 'right',
              styles: {
                top: 'calc(50% - 10px - 1rem)',
                right: 'min(50px, 5%)',
              },
            },
            {
              placement: 'right-start',
              styles: {
                top: 'calc(50% - 70px - 1rem)',
                right: 'min(50px, 5%)',
              },
            },
            {
              placement: 'right-end',
              styles: {
                top: 'calc(50% + 50px - 1rem)',
                right: 'min(50px, 5%)',
              },
            },
            {
              placement: 'left',
              styles: {
                top: 'calc(50% - 10px - 1rem)',
                left: 'min(50px, 5%)',
              },
            },
            {
              placement: 'left-start',
              styles: {
                top: 'calc(50% - 70px - 1rem)',
                left: 'min(50px, 5%)',
              },
            },
            {
              placement: 'left-end',
              styles: {
                top: 'calc(50% + 50px - 1rem)',
                left: 'min(50px, 5%)',
              },
            },
          ].map(({placement: p, styles}) => (
            <button
              key={p}
              className="p-4 absolute transform transition hover:scale-125"
              style={styles}
              onClick={() => setPlacement(p)}
              aria-label={p}
            >
              <div
                className={cn(
                  ' rounded-full border-2 border-solid border-blue-400',
                  {
                    'bg-blue-400': placement === p,
                  }
                )}
                style={{
                  width: 20,
                  height: 20,
                }}
              />
            </button>
          ))}
          <Tippy
            placement={placement}
            visible
            content="Tooltip"
            offset={[0, 8]}
            arrow={false}
            theme="light-border"
            popperOptions={{
              modifiers: [
                {
                  name: 'flip',
                  enabled: false,
                },
                {
                  name: 'preventOverflow',
                  enabled: false,
                },
              ],
            }}
          >
            <button className="bg-blue-600 rounded text-md text-gray-50 p-2 sm:w-48 h-48">
              Click the dots
            </button>
          </Tippy>
        </div>
      </div>
    </div>
  );
}

function Shift() {
  const [boundary, setBoundary] = useState();

  useIsomorphicLayoutEffect(() => {
    if (boundary) {
      boundary.firstElementChild.scrollTop = 200;
    }
  }, [boundary]);

  return (
    <div className="mb-4 grid lg:grid-cols-12 gap-8 bg-gradient-to-r from-green-600 to-blue-800 rounded-lg px-4 py-8 sm:p-8">
      <div className="lg:col-span-7 overflow-hidden">
        <h3 className="text-3xl text-gray-50 font-bold mb-4">
          Shift
        </h3>
        <p className="text-2xl text-green-100 mb-4">
          Shift the floating element in view to prevent overflow.
        </p>
        <div className="rounded-lg bg-gray-800 p-4 overflow-auto">
          <StaticCode middleware="shift" placement="right" />
        </div>
      </div>
      <div
        ref={setBoundary}
        className="grid lg:col-span-5 relative overflow-hidden p-2 bg-gray-800 rounded-lg"
        style={{height: 470}}
      >
        <div className="grid relative items-center bg-gray-800 rounded overflow-auto w-full border-4 border-solid border-red-400">
          <div
            style={{
              height: 400,
              width: 1,
            }}
          />
          <div className="text-center">
            <Tippy
              visible={!!boundary}
              placement="right"
              content={
                <div className="px-2 text-center">
                  <div style={{height: 125}}></div>
                  <div>Floating</div>
                  <div>Element</div>
                  <div style={{height: 125}}></div>
                </div>
              }
              offset={[0, 8]}
              appendTo={() => boundary ?? document.body}
              theme="light-border"
              popperOptions={{
                modifiers: [
                  {
                    name: 'preventOverflow',
                    options: {
                      rootBoundary: 'document',
                      padding: 15,
                      tether: false,
                    },
                  },
                ],
              }}
            >
              <button className="bg-blue-600 rounded text-md text-gray-50 p-2">
                Scroll
              </button>
            </Tippy>
          </div>
          <div
            style={{
              height: 400,
              width: 1,
            }}
          />
        </div>
      </div>
    </div>
  );
}

function Flip() {
  const [boundary, setBoundary] = useState();

  useIsomorphicLayoutEffect(() => {
    if (boundary) {
      boundary.firstElementChild.scrollTop = 275;
    }
  }, [boundary]);

  return (
    <div className="mb-4 grid lg:grid-cols-12 gap-8 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg px-4 py-8 sm:p-8">
      <div className="grid lg:col-span-7 overflow-hidden">
        <h3 className="text-3xl text-gray-50 font-bold mb-4">
          Flip
        </h3>
        <p className="text-2xl text-red-100 mb-4">
          Flip the floating element to the opposite placement to
          prevent overflow.
        </p>
        <div className="rounded-lg bg-gray-800 p-4 overflow-auto">
          <StaticCode middleware="flip" placement="top" />
        </div>
      </div>
      <div
        className="grid lg:col-span-5 relative overflow-hidden p-2 bg-gray-800 rounded-lg"
        ref={setBoundary}
      >
        <div
          className="grid relative items-center bg-gray-800 rounded overflow-auto w-full border-4 border-styled border-red-400"
          style={{height: 485}}
        >
          <div
            style={{
              height: 500,
              width: 1,
            }}
          />
          <div className="text-center">
            <Tippy
              visible
              content={
                <div className="px-4">
                  <div style={{height: 30}}></div>
                  <span>Tooltip</span>
                  <div style={{height: 30}}></div>
                </div>
              }
              offset={[0, 8]}
              appendTo="parent"
              theme="light-border"
              popperOptions={{
                modifiers: [
                  {
                    name: 'preventOverflow',
                    options: {
                      rootBoundary: 'document',
                    },
                  },
                  {
                    name: 'flip',
                    options: {
                      rootBoundary: 'document',
                      padding: 0,
                    },
                  },
                ],
              }}
            >
              <button className="bg-blue-600 rounded text-md text-gray-50 p-2">
                Scroll
              </button>
            </Tippy>
          </div>
          <div
            style={{
              height: 500,
              width: 1,
            }}
          />
        </div>
      </div>
    </div>
  );
}

function Popovers() {
  return (
    <div className="grid lg:grid-cols-2 gap-4 bg-gradient-to-tr from-purple-600 to-blue-800 rounded-lg px-4 py-8 sm:p-8">
      <div>
        <h3 className="text-3xl text-gray-50 font-bold mb-4">
          Popovers
        </h3>
        <p className="text-2xl text-pink-100 mb-4">
          Floating elements displaying rich HTML content
        </p>
      </div>
      <div className="flex flex-col gap-2">
        <div className="grid items-center h-full bg-gray-300 py-12 text-gray-900 rounded-lg p-4">
          <div className="text-center">
            <Tippy
              content={
                <div
                  className="text-left"
                  style={{
                    // Fixes shaky text in Chrome...
                    transform: 'rotate(0.001deg)',
                  }}
                >
                  <h3 className="text-xl font-bold p-2">
                    My popover title
                  </h3>
                  <div className="h-px bg-gray-200"></div>
                  <p className="p-2">
                    My long popover description that spans over
                    multiple lines.
                  </p>
                </div>
              }
              theme="light-border"
              animation="scale-subtle"
              trigger="click"
              duration={[250, 150]}
              maxWidth={250}
              aria={{content: 'labelledby'}}
            >
              <button className="text-lg bg-blue-600 text-gray-50 hover:bg-blue-700 p-3 transition-colors rounded">
                View explanation
              </button>
            </Tippy>
            <div className="text-gray-500 mt-2">
              Click to open
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Dropdowns() {
  return (
    <div className="grid lg:grid-cols-2 gap-4 bg-gradient-to-tr from-blue-600 via-purple-700 to-pink-600 rounded-lg px-4 py-8 sm:p-8">
      <div>
        <h3 className="text-3xl text-gray-50 font-bold mb-4">
          Dropdowns
        </h3>
        <p className="text-2xl mb-4 text-pink-100">
          A menu of items and submenus
        </p>
      </div>
      <div className="flex flex-col gap-2">
        <div className="grid items-center h-full bg-gray-300 py-12 text-gray-900 rounded-lg p-4">
          <div className="text-center">
            <DropdownExample />
            <div className="text-gray-500 mt-2">
              Click to open
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Tooltips() {
  return (
    <div className="grid lg:grid-cols-2 gap-8 bg-gradient-to-r from-blue-800 to-purple-700 rounded-lg px-4 py-8 sm:p-8">
      <div>
        <h3 className="text-3xl text-gray-50 font-bold mb-4">
          Tooltips
        </h3>
        <p className="text-2xl text-blue-200 mb-4">
          A floating element to describe an element, e.g. button
        </p>
      </div>
      <div className="flex flex-col gap-2 overflow-hidden">
        <div className="grid items-center h-full bg-gray-300 py-12 text-gray-900 rounded-lg">
          <div className="text-center">
            <Tippy content="Add emoji" offset={[0, 8]}>
              <button className="text-3xl">🙂</button>
            </Tippy>
            <div className="text-gray-500">
              Hover, tap, or focus
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HomePage() {
  return (
    <>
      <Head>
        <title>
          Floating UI - Positioning for tooltips, popovers,
          dropdowns, and more
        </title>
      </Head>
      <header className="from-gray-700 to-gray-800 mb-24 overflow-hidden relative pb-48">
        <div className="container py-8 mx-auto px-4 text-center max-w-screen-xl">
          <Logo
            className="mx-auto"
            aria-label="Floating UI logo"
          />
          <div
            className="absolute -z-1 w-full"
            style={{
              top: '0',
              left: 'calc(-35rem + 50vw)',
              width: 1200,
            }}
          >
            <img
              className="select-none"
              src="/floating-ui.jpg"
              width={1167}
              height={648}
            />
          </div>
          <h1 className="text-gray-50 mb-8 text-5xl sm:text-6xl font-bold">
            Floating UI
          </h1>
          <div className="flex flex-row justify-center gap-x-4">
            <Link href="/docs/getting-started">
              <a
                className="flex items-center gap-2 filter transition hover:saturate-110 hover:brightness-125 bg-gradient-to-b from-blue-500 to-blue-600 shadow-lg hover:shadow-xl rounded text-gray-50 px-4 py-3 sm:text-xl font-bold whitespace-nowrap"
                href="/docs/getting-started"
              >
                Get Started <ArrowRight />
              </a>
            </Link>
            <a
              href="https://github.com/atomiks/floating-ui"
              className="flex transition hover:shadow-xl items-center gap-2 bg-gray-50 rounded text-gray-900 px-4 py-3 sm:text-xl shadow-lg font-bold"
              target="_blank"
              rel="noopener noreferrer"
            >
              <GitHub /> GitHub
            </a>
          </div>
        </div>
      </header>
      <main className="relative -mt-60 sm:-mt-48">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <h2 className="inline-block text-4xl leading-gradient-heading lg:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500">
            Powerful positioning primitives.
          </h2>
          <p className="text-2xl lg:text-3xl text-left">
            Position all types of{' '}
            <Tippy
              content={
                <div className="text-lg p-2">
                  A <strong>floating element</strong> is one that
                  floats on top of the UI without disrupting the
                  flow of content, like this one!
                </div>
              }
              theme="light-border"
              aria={{content: 'labelledby'}}
              animation="scale-subtle"
              duration={[450, 125]}
              inlinePositioning={true}
              plugins={[inlinePositioning]}
            >
              <span
                tabIndex={0}
                className="relative"
                style={{
                  textDecorationLine: 'underline',
                  textDecorationStyle: 'wavy',
                  textUnderlineOffset: 6,
                  textDecorationThickness: 2,
                  textDecorationColor:
                    'rgba(200, 200, 255, 0.25)',
                }}
              >
                floating elements
              </span>
            </Tippy>{' '}
            with full control. Tooltips, popovers, dropdowns,
            menus, and more.
          </p>
        </div>
        <div className="container px-4 py-8 mx-auto max-w-screen-xl">
          <Placement />
          <Shift />
          <Flip />
        </div>

        <div className="container mx-auto px-4 max-w-screen-xl relative">
          <h2 className="inline-block text-transparent leading-gradient-heading bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-200 text-4xl lg:text-5xl font-bold mt-8 mb-4">
            Light as a feather.
          </h2>
          <p className="text-2xl lg:text-3xl text-left mb-8">
            The core is only 600 bytes when minified and
            compressed with Brotli. Plus, the architecture is
            super modular, so tree-shaking works like a charm.
          </p>
          <div className="grid items-center py-4">
            <div className="flex flex-col text-center text-lg sm:text-xl md:text-2xl mx-auto pr-4 sm:pr-20 md:pr-40">
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  computePosition
                  <span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-gray-400 text-left">
                  &nbsp; 0.6 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  shift<span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.6 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  limitShift
                  <span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.1 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  flip<span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.5 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  hide<span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.2 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  arrow<span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.2 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  offset
                  <span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.1 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  size<span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.2 kB
                </span>
              </div>
              <div className="mb-2 flex gap-2 items-center justify-center">
                <code className="flex-1 text-blue-400 text-right">
                  autoPlacement
                  <span className="text-blue-200">()</span>
                </code>
                <span className="text-lg text-green-400 text-left">
                  +0.4 kB
                </span>
              </div>
              <div className="mb-2 flex gap-3 items-center justify-center">
                <code className="flex-1 text-gray-400 text-right">
                  DOM platform
                </code>
                <span className="text-lg text-yellow-400 text-left">
                  +1.9 kB
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="container mx-auto px-4 max-w-screen-xl relative">
          <h2 className="inline-block leading-gradient-heading text-4xl lg:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-pink-400 mt-16">
            Endlessly extensible.
          </h2>
          <p className="text-2xl lg:text-3xl text-left mb-8">
            The core package exports middleware that cover 99% of
            positioning use cases, but for the remaining 1%, it's
            straightforward to add your own positioning logic.
          </p>

          <div className="grid lg:grid-cols-2 gap-4">
            <div className="bg-gradient-to-br from-red-600 to-pink-700 rounded-lg py-6 px-10">
              <h3 className="text-3xl text-gray-50 font-bold mb-4 text-yellow-100">
                Core middleware
              </h3>
              <ul className="text-xl text-pink-100 pl-6 flex flex-col gap-2">
                <li className="relative">
                  <Check
                    className="absolute top-1"
                    style={{left: '-2rem'}}
                  />
                  Instantly importable and usable
                </li>
                <li className="relative">
                  <Check
                    className="absolute top-1"
                    style={{left: '-2rem'}}
                  />
                  Simple and powerful
                </li>
                <li className="relative">
                  <Check
                    className="absolute top-1"
                    style={{left: '-2rem'}}
                  />
                  Customizable through options
                </li>
              </ul>
            </div>
            <div className="bg-gradient-to-br from-red-600 to-pink-700 rounded-lg py-6 px-10">
              <h3 className="text-3xl text-gray-50 font-bold mb-4 text-yellow-100">
                Custom middleware
              </h3>
              <ul className="text-xl text-pink-100 pl-6 flex flex-col gap-2">
                <li className="relative">
                  <Check
                    className="absolute top-1"
                    style={{left: '-2rem'}}
                  />
                  Modify positioning coordinates
                </li>
                <li className="relative">
                  <Check
                    className="absolute top-1"
                    style={{left: '-2rem'}}
                  />
                  Add custom data
                </li>
                <li className="relative">
                  <Check
                    className="absolute top-1"
                    style={{left: '-2rem'}}
                  />
                  Add custom behavior
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div className="container mx-auto px-4 max-w-screen-xl relative">
          <h2 className="inline-block leading-gradient-heading text-4xl lg:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-red-300 to-green-300 mt-16">
            Components!
          </h2>
          <p className="text-2xl lg:text-3xl text-left mb-8">
            Higher-level primitives to craft beautiful and
            accessible tooltips, popovers, dropdowns, and more is
            in development.
          </p>

          <div className="grid lg:grid-cols-2 gap-4">
            <Tooltips />
            <Dropdowns />
            <Popovers />

            <div className="bg-gradient-to-tr from-gray-700 to to-gray-800 rounded-lg px-4 py-8 sm:p-8">
              <h3 className="text-3xl text-gray-50 font-bold mb-4">
                Coming soon
              </h3>
              <p className="text-xl mb-4">
                The{' '}
                <span className="text-gray-50 font-bold">
                  @floating-ui/components
                </span>{' '}
                package is in development. Consider supporting
                the future of this project through sponsorship:
              </p>
              <a
                href="https://github.com/sponsors/atomiks"
                className="flex justify-center items-center gap-2 text-xl border-2 border-solid border-pink-300 text-pink-300 rounded px-4 py-2 hover:bg-pink-300 hover:text-gray-900 transition"
              >
                Sponsor <Heart />
              </a>
            </div>
          </div>
        </div>

        <div className="container mx-auto px-4 max-w-screen-xl relative">
          <h2 className="inline-block text-4xl lg:text-5xl leading-gradient-heading font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-green-400 via-red-400 to-yellow-100 mt-16">
            Ready to install?
          </h2>
          <p className="text-2xl lg:text-3xl text-left mb-8">
            Start playing via CDN or your package manager.
          </p>

          <div className="grid lg:grid-cols-2 gap-4">
            <div className="border-gray-200 border-2 text-gray-100 rounded-lg py-8 px-12">
              <h3 className="text-3xl font-bold mb-4">
                Package Manager
              </h3>
              <p className="text-xl">
                Install with npm or Yarn.
              </p>
              <Link href="/docs/getting-started">
                <a
                  href="/docs/getting-started"
                  className="text-2xl font-bold flex gap-2 items-center mt-4"
                >
                  Get started <ArrowRight />
                </a>
              </Link>
            </div>
            <div className="border-gray-200 border-2 text-gray-100 rounded-lg py-8 px-12">
              <h3 className="text-3xl font-bold mb-4">CDN</h3>
              <p className="text-xl">
                Install with the unpkg CDN.
              </p>
              <Link href="/docs/getting-started#cdn">
                <a
                  href="/docs/getting-started#cdn"
                  className="text-2xl font-bold flex gap-2 items-center mt-4"
                >
                  Get started <ArrowRight />
                </a>
              </Link>
            </div>
          </div>
        </div>
      </main>

      <footer className="text-center text-gray-500 bg-gray-1000 mt-16 py-8">
        <div className="flex flex-col gap-3 container mx-auto px-4 max-w-screen-xl">
          <p>© {new Date().getFullYear()} • MIT License</p>
          <p className="text-gray-400">
            Floating UI is a project by the creator of Tippy.js
            and co-author of Popper 2, designed to be a
            next-generation evolution of those libraries.
          </p>
          <p className="text-gray-400">
            Floating shapes in the header are licensed under CC
            BY from{' '}
            <a
              className="text-blue-400"
              href="https://www.figma.com/@killnicole"
            >
              Vic
            </a>{' '}
            and{' '}
            <a
              className="text-blue-400"
              href="https://www.figma.com/@Artstar3d"
            >
              Lisa Star
            </a>
            . Partial modifications were made.
          </p>
        </div>
      </footer>
    </>
  );
}

export default HomePage;
