import {Link, useLocation} from 'react-router-dom';
import clsx from 'clsx';
import {Fragment, useEffect, useState} from 'react';
import {IconButton} from '../../ui/buttons/icon-button';
import {KeyboardArrowLeftIcon} from '../../icons/material/KeyboardArrowLeft';
import {KeyboardArrowRightIcon} from '../../icons/material/KeyboardArrowRight';
import {Trans} from '../../i18n/trans';
import {MixedText} from '../../i18n/mixed-text';
import {useFormContext} from 'react-hook-form';
import {appearanceState, AppearanceValues} from './appearance-store';
import {AppearanceEditorBreadcrumbItem} from './types/appearance-editor-section';
import {message} from '../../i18n/message';

export function SectionHeader() {
  const {pathname} = useLocation();
  const {getValues} = useFormContext<AppearanceValues>();
  const [breadcrumb, setBreadcrumb] = useState<
    AppearanceEditorBreadcrumbItem[] | null
  >(null);

  useEffect(() => {
    const [, , sectionName] = pathname.split('/').filter(p => !!p);
    if (sectionName) {
      const section = appearanceState().config?.sections[sectionName];
      if (section) {
        setBreadcrumb([
          {
            label: message('Appearance'),
            location: '',
          },
          ...section.buildBreadcrumb(pathname, getValues()),
        ]);
        // bail, so breadcrumb is not cleared below
        return;
      }
    }
    setBreadcrumb(null);
  }, [pathname, getValues]);

  // not need to show section header if already at root
  if (!breadcrumb || breadcrumb.length < 2) {
    return null;
  }

  return (
    <div className="flex items-center border-b h-60 flex-shrink-0">
      <IconButton
        iconSize="md"
        radius="rounded-none"
        className="text-muted h-full w-50 flex-shrink-0"
        elementType={Link}
        to={`/admin/appearance/${breadcrumb[breadcrumb.length - 2].location}`}
      >
        <KeyboardArrowLeftIcon />
      </IconButton>
      <div className="border-l p-10 min-w-0">
        <div className="text-xs text-muted">
          <Trans message="Customizing" />
        </div>
        <div className="flex items-center gap-4 text-sm mt-2">
          {breadcrumb.map((item, index) => {
            const isLast = breadcrumb.length - 1 === index;
            const isFirst = index === 0;
            const label = <MixedText value={item.label} />;

            if (isFirst) {
              return null;
            }

            return (
              <Fragment key={index}>
                <div
                  className={clsx(
                    'whitespace-nowrap overflow-hidden overflow-ellipsis min-w-0',
                    isLast && 'text-primary',
                    // don't overflow ellipses last item
                    isLast ? 'flex-shrink-0' : 'flex-auto'
                  )}
                >
                  {label}
                </div>
                {!isLast && (
                  <KeyboardArrowRightIcon className="icon-sm text-muted flex-shrink-0" />
                )}
              </Fragment>
            );
          })}
        </div>
      </div>
    </div>
  );
}