import { FontFamily } from '@handoff/types/font';
import sortedUniq from 'lodash/sortedUniq';
import type * as next from 'next';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import { DownloadTokens } from '../../components/DownloadTokens';
import TypographyExamples from '../../components/Foundations/TypographyExample';
import Layout from '../../components/Layout/Main';
import { MarkdownComponents } from '../../components/Markdown/MarkdownComponents';
import AnchorNav, { anchorSlugify } from '../../components/Navigation/AnchorNav';
import HeadersType from '../../components/Typography/Headers';
import { fetchFoundationDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens } from '../../components/util';

export interface typographyTypes {
  [key: string]: any;
}

/**
 * This statically renders content from the markdown, creating menu and providing
 * metadata
 *
 * This is all done statically at build time
 * @param context GetStaticProps
 * @returns
 */
export const getStaticProps: next.GetStaticProps = async () => {
  return {
    props: {
      ...fetchFoundationDocPageMarkdown('docs/foundations/', 'typography', `/foundations`).props,
      config: getClientRuntimeConfig(),
      design: getTokens().localStyles,
    },
  };
};

const Typography = ({
  content,
  menu,
  metadata,
  current,
  scss,
  css,
  styleDictionary,
  types,
  config,
  design,
}: FoundationDocumentationProps) => {
  const typography = design.typography.slice().sort((a, b) => {
    const l = (config?.app?.type_sort ?? []).indexOf(a.name) >>> 0;
    const r = (config?.app?.type_sort ?? []).indexOf(b.name) >>> 0;
    return l !== r ? l - r : a.name.localeCompare(b.name);
  });

  const families: FontFamily = typography.reduce((result, current) => {
    return {
      ...result,
      [current.values.fontFamily]: result[current.values.fontFamily]
        ? // sorts and returns unique font weights
          sortedUniq([...result[current.values.fontFamily], current.values.fontWeight].sort((a, b) => a - b))
        : [current.values.fontWeight],
    };
  }, {} as FontFamily);

  const type_copy = config?.app?.type_copy ?? 'Almost before we knew it, we had left the ground.';

  const typographyCategories = typography.reduce((acc, type) => {
    if (type.name.includes('/')) {
      const category = type.name.split('/')[0].trim();
      acc.add(category);
    }
    return acc;
  }, new Set<string>());

  return (
    <Layout config={config} menu={menu} metadata={metadata} current={current}>
      <div className="flex flex-col gap-2 pb-7">
        <HeadersType.H1>{metadata.title}</HeadersType.H1>
        <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
        <DownloadTokens componentId="colors" scss={scss} css={css} styleDictionary={styleDictionary} types={types} />
      </div>
      <div className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
        <div>
          <div id="typefaces" className="scroll-mt-24 pb-10">
            <HeadersType.H2 className="mb-4 text-2xl font-semibold">Typefaces</HeadersType.H2>
            <p className="mb-8">
              Our typeface defines the foundation of our typography system. It ensures readability, consistency, and flexibility across all
              applications.
            </p>
            {Object.keys(families).map((key) => (
              <div className="rounded-lg bg-gray-50 p-10" key={key} id={`typeface-${anchorSlugify(key)}`}>
                <p className="mb-1 text-sm">Typeface</p>
                <div className="" style={{ fontFamily: key }}>
                  <p className="mb-3 text-3xl leading-relaxed text-gray-900 dark:text-gray-100">{key}</p>
                  <p className="mb-2 break-all text-xs  tracking-[0.3em] text-gray-400">
                    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
                  </p>
                  <p className=" break-all text-xs  tracking-[0.3em] text-gray-400">
                    1234567890&apos;?&quot;!&quot;(%)[#]@/&amp;\-+÷×=®©$€£¥¢:;,.*
                  </p>
                </div>
              </div>
            ))}
          </div>

          <div id="typography-scale" className="scroll-mt-24 pb-10">
            <HeadersType.H2 className="mb-4 text-2xl font-semibold">Typography Scale</HeadersType.H2>
            <p className="mb-8">
              This is our typography hierarchy, defining the full range of headings, paragraphs, labels and other text used across the
              system. It creates a clear and consistent type ramp to maintain readability and visual harmony.
            </p>
            <TypographyExamples types={typography} />
          </div>
        </div>

        <AnchorNav
          groups={[
            {
              typefaces: 'Typefaces',
            },
            {
              'typography-scale': 'Typography Scale',
            },
          ]}
        />

        <div className="prose">
          <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
            {content}
          </ReactMarkdown>
        </div>
      </div>
    </Layout>
  );
};
export default Typography;

/**
 *
 *       {Object.keys(families).map((key) => (
        <div className="c-typography__preview-big" key={`family-${key}`}>
          <div className="o-row u-justify-between">
            <div className="o-col-4@md u-mb-4 u-mb-0@md">
              <small>Typeface</small>
              <h2 style={{ fontFamily: key }}>{key}</h2>
              <hr />
              <p>Primary font used, related assets can be found in the assets page.</p>
              <p>
                <NavLink href="/assets/fonts">Download Fonts</NavLink>
              </p>
            </div>
            <div className="o-col-7@md">
              <div className="o-row o-row--no-gutters">
                {families[key].map((weight) => (
                  <div
                    className="c-typography__preview-weight"
                    style={{ fontWeight: weight, fontFamily: key }}
                    key={`family-${weight}-${key}`}
                  >
                    <h2>Aa</h2>
                    <p>{weight}</p>
                  </div>
                ))}
              </div>
              <div className="o-row" style={{ fontFamily: key }}>
                <h3>ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</h3>
                <h3>1234567890‘?’“!”(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*</h3>
              </div>
            </div>
          </div>
        </div>
      ))}

 *   <div className="o-row">
            <div className="o-col-10@md">
              <div>
                <h3>Type Scale</h3>
                <p>
                  Nullam tempor nunc ut tempus vehicula. Duis dignissim sem id nulla tempus, eget cursus sapien efficitur. Suspendisse
                  convallis odio a dui congue vulputate.
                </p>
              </div>
            </div>
          </div>
          <div>
            {typography.map((type) => (
              <div className="c-typography__preview" id={type.machine_name} key={type.machine_name}>
                <div className="o-row">
                  <div className="o-col-3@md u-mb-4 u-mb-0@md">
                    <h6>
                      {type.name}
                      <a
                        href={`#${type.machine_name}`}
                        className="c-tooltip"
                        data-tooltip={copy}
                        onMouseEnter={(e) => setCopy('Copy link to clipboard')}
                        onClick={(e) => {
                          e.preventDefault();
                          if (window) {
                            navigator.clipboard.writeText(
                              'https://' + window.location.host + window.location.pathname + '#' + type.machine_name
                            );
                            setCopy('Copied');
                          }
                          return false;
                        }}
                      >
                        <span>
                          <Icon name="link" className="o-icon" />
                        </span>
                      </a>
                    </h6>
                    <p>
                      {type.values.fontFamily} · {type.values.fontWeight}
                    </p>
                    <p>
                      {type.values.fontSize}px · {(type.values.lineHeightPx / type.values.fontSize).toFixed(1)}
                    </p>
                  </div>
                  <div className="o-col-9@md">
                    {renderTypes(type, copy)[type.name] ?? <span style={pluckStyle(type)}>{type_copy}</span>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
 */