import 'server-only';

import { Link, Accordion } from '@theme/components';
import { getWidgetData } from '@akinon/next/data/server';
import { ServerVariables } from '@akinon/next/utils/server-variables';

type SideItem = {
  value: string;
  data_type: 'dropdown';
};

type TargetBlank = {
  value: string;
  data_type: 'dropdown';
};

type FooterMenuItem = [
  {
    // TODO: Refactor this from commerce_proxy
    kwargs: {
      data_type: 'nested';
      value: {
        is_side_column_item?: SideItem;
        is_target_blank: TargetBlank;
      };
    };
    value: {
      is_side_column_item?: string;
      is_target_blank: string;
      name: string;
      redirect_url: string;
    };
  }
];

type FooterMenuTitle = {
  value: string;
};

type FooterMenuType = {
  first_column_title: FooterMenuTitle;
  first_column_items: FooterMenuItem;
  second_column_title: FooterMenuTitle;
  second_column_items: FooterMenuItem;
  third_column_title: FooterMenuTitle;
  third_column_items: FooterMenuItem;
};

export default async function FooterMenu() {
  const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
  const { locale } = ServerVariables;

  return (
    <div className="flex-1">
      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l">
        <div>
          <div className="mb-4 font-medium" data-testid="footer-categories">
            {data?.attributes?.first_column_title?.value}
          </div>

          <div className="flex">
            <ul className="mr-10 lg:mr-8 xl:mr-16">
              {data?.attributes?.first_column_items
                ?.filter(
                  (category) => category?.value?.is_side_column_item === 'False'
                )
                .map((item, i) => (
                  <li className="mb-2" key={i}>
                    <Link
                      href={item?.value?.redirect_url}
                      target={
                        item?.value?.is_target_blank === 'true'
                          ? '_blank'
                          : '_self'
                      }
                      data-testid={`footer-categories-${item?.value?.name
                        ?.toLocaleLowerCase(locale)
                        .split(' ')
                        .join('')}`}
                    >
                      {item?.value?.name}
                    </Link>
                  </li>
                ))}
            </ul>

            <ul className="lg:mr-8">
              {data?.attributes?.first_column_items
                ?.filter(
                  (category) => category?.value?.is_side_column_item === 'True'
                )
                .map((item, i) => (
                  <li className="mb-2" key={i}>
                    <Link
                      href={item?.value?.redirect_url}
                      target={
                        item?.value?.is_target_blank === 'true'
                          ? '_blank'
                          : '_self'
                      }
                      data-testid={`footer-categories-${item?.value?.name?.toLocaleLowerCase(
                        locale
                      )}`}
                    >
                      {item?.value?.name}
                    </Link>
                  </li>
                ))}
            </ul>
          </div>
        </div>

        <div>
          <div className="mb-4 font-medium" data-testid="footer-my-account">
            {data?.attributes?.second_column_title?.value}
          </div>

          <div>
            <ul className="mr-8">
              {data?.attributes?.second_column_items?.map((item, i) => (
                <li className="mb-2" key={i}>
                  <Link
                    href={item?.value?.redirect_url}
                    target={
                      item?.value?.is_target_blank === 'true'
                        ? '_blank'
                        : '_self'
                    }
                  >
                    {item?.value?.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div>
          <div className="mb-4 font-medium" data-testid="footer-customer-care">
            {data?.attributes?.third_column_title?.value}
          </div>

          <div>
            <ul className="lg:mr-8 xl:mr-16">
              {data?.attributes?.third_column_items?.map((item, i) => (
                <li className="mb-2" key={i}>
                  <Link
                    href={item?.value?.redirect_url}
                    target={
                      item?.value?.is_target_blank === 'true'
                        ? '_blank'
                        : '_self'
                    }
                  >
                    {item?.value?.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <div className="block md:hidden">
        <Accordion
          title={data?.attributes?.first_column_title?.value}
          titleClassName="text-xs font-medium"
        >
          <div>
            <ul className="text-xs px-4">
              {data?.attributes?.first_column_items
                ?.filter(
                  (category) => category?.value?.is_side_column_item === 'False'
                )
                .map((item, i) => (
                  <li className="mb-2" key={i}>
                    <Link
                      href={item?.value?.redirect_url}
                      target={
                        item?.value?.is_target_blank === 'true'
                          ? '_blank'
                          : '_self'
                      }
                    >
                      {item?.value?.name}
                    </Link>
                  </li>
                ))}
            </ul>

            <ul className="text-xs px-4">
              {data?.attributes?.first_column_items
                ?.filter(
                  (category) => category?.value?.is_side_column_item === 'True'
                )
                .map((item, i) => (
                  <li className="mb-2" key={i}>
                    <Link
                      href={item?.value?.redirect_url}
                      target={
                        item?.value?.is_target_blank === 'true'
                          ? '_blank'
                          : '_self'
                      }
                    >
                      {item?.value?.name}
                    </Link>
                  </li>
                ))}
            </ul>
          </div>
        </Accordion>

        <Accordion
          title={data?.attributes?.second_column_title?.value}
          titleClassName="text-xs font-medium"
        >
          <div>
            <ul className="text-xs px-4">
              {data?.attributes?.second_column_items?.map((item, i) => (
                <li className="mb-2" key={i}>
                  <Link
                    href={item?.value?.redirect_url}
                    target={
                      item?.value?.is_target_blank === 'true'
                        ? '_blank'
                        : '_self'
                    }
                  >
                    {item?.value?.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </Accordion>

        <Accordion
          className="last:mb-0"
          title={data?.attributes?.third_column_title?.value}
          titleClassName="text-xs font-medium"
        >
          <div>
            <ul className="text-xs px-4">
              {data?.attributes?.third_column_items?.map((item, i) => (
                <li className="mb-2" key={i}>
                  <Link
                    href={item.value.redirect_url}
                    target={
                      item.value.is_target_blank === 'true' ? '_blank' : '_self'
                    }
                  >
                    {item.value.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </Accordion>
      </div>
    </div>
  );
}