'use client';

import * as React from 'react';
import clsx from 'clsx';
import NextImage from 'next/image';

import styles from './section.module.css';

export default function Company(props: any) {
  return (
    <section className="mt-4 flex w-full max-w-5xl flex-col items-center justify-center px-6 sm:my-8 lg:px-8">
      <CompanyCodeEle />
      <ImageGallery />
    </section>
  );
}

const CompanyCodeEle = (props: any) => {
  return (
    <p className="mb-10 hidden rounded-[30px] border-2 border-solid border-darkgrey-900 bg-black px-6 py-2 sm:block lg:px-10">
      <code className="c1 font-mono font-bold">
        <span className="text-[rgb(var(--dark-code-tag-t-list-rgb))]">
          SELECT
        </span>
        {` `}
        name{` `}
        <span className="text-[rgb(var(--dark-code-tag-t-heading-rgb))]">
          FROM
        </span>
        {` `} companies{' '}
        <span className="text-[rgb(var(--dark-code-tag-t-tag-name-rgb))]">
          WHERE
        </span>
        {` `} uses_tidb ={' '}
        <span className="text-[rgb(var(--dark-code-tag-t-escape-rgb))]">
          TRUE
        </span>
      </code>
    </p>
  );
};

const ImageGallery = (props: any) => {
  return (
    <>
      <div className="hidden h-fit w-full select-none flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)] sm:inline-flex">
        <ImageItemList
          className={clsx(styles.galleryHorizonScroll, 'flex grayscale')}
        />
        <ImageItemList
          className={clsx(styles.galleryHorizonScroll, 'flex grayscale')}
          aria-label="hidden"
        />
      </div>
      <MobileImageItemList />
    </>
  );
};

interface ImageItemListProps extends React.HTMLAttributes<HTMLUListElement> {
  className?: string;
}

const ImageItemWrapper = (props: { children?: React.ReactNode }) => {
  const { children } = props;

  return <li className="flex items-center justify-center">{children}</li>;
};

const ImageItemList = (props: ImageItemListProps) => {
  const { className, ...others } = props;

  return (
    <ul
      className={clsx(
        'h-12 items-center justify-center md:justify-start [&_img]:max-w-none [&_li]:mx-8',
        className,
      )}
      {...others}
    >
      <ImageItemWrapper>
        <NextImage
          src="/company/_レイヤー_1.svg"
          alt="レイヤー"
          width={58}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/Capcom_logo.svg"
          alt="capcom"
          width={220}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/Chainbase.svg"
          alt="Chainbase"
          width={256}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/chaintool.svg"
          alt="chaintool"
          width={240}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/Dashcomb.png"
          alt="Dashcomb"
          width={240}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/holla-world.png"
          alt="holla-world"
          width={40}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/KNN3-logo.png"
          alt="KNN3"
          width={120}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/LINE.svg"
          alt="LINE"
          width={115}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/Ninjavan.svg"
          alt="ninja-van"
          width={150}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/Sandisolar.png"
          alt="Sandisolar"
          width={155}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/square.svg"
          alt="square"
          width={156}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/vivi3.svg"
          alt="vivi3"
          width={40}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/AmzTrends.svg"
          alt="AmzTrends"
          width={72.41}
          height={11.41}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
    </ul>
  );
};

const MobileImageItemList = () => {
  return (
    <ul className="flex h-12 w-full items-center justify-center gap-2 grayscale sm:hidden md:justify-start [&_img]:h-4 [&_img]:w-auto [&_li]:flex-1">
      <ImageItemWrapper>
        <NextImage
          src="/company/Chainbase.svg"
          alt="Chainbase"
          width={256}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/square.svg"
          alt="square"
          width={156}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/Capcom_logo.svg"
          alt="capcom"
          width={220}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
      <ImageItemWrapper>
        <NextImage
          src="/company/LINE.svg"
          alt="LINE"
          width={115}
          height={40}
          className="h-8 w-auto"
        />
      </ImageItemWrapper>
    </ul>
  );
};
