import styles from './PartnerRelationships.module.scss';
import { LogosFormat } from '../../models/common';
import React, { useEffect, useState } from 'react';
import PartnerRelationshipsItem from './PartnerRelationshipsItem';
import { useMediaQuery } from 'react-responsive';

export type Props = {
  title: string;
  logos: Array<LogosFormat>[];
};

const PartnerRelationships = (props: Props): JSX.Element => {
  const title = props.title;
  const _logos = props.logos;
  const isDesktop = useMediaQuery({ query: '(min-width: 900px)' });
  const isTablet = useMediaQuery({ query: '(min-width: 560px)' });
  const [logos, setLogos] = useState<LogosFormat[][]>();
  useEffect(() => {
    const tabletLogos = (): LogosFormat[][] => {
      const logos = _logos.flat();
      const length = logos?.length;
      const logosLeft: LogosFormat[] = [...logos].splice(0, Number(length / 2));
      const logosRight: LogosFormat[] = [...logos].splice(
        Number(length / 2),
        length
      );
      return [logosLeft, logosRight];
    };
    let logos: LogosFormat[][] = isDesktop ? _logos : tabletLogos();
    if (!isTablet) logos = [_logos.flat()];
    setLogos(logos);
  }, [isTablet, isDesktop, _logos]);

  return (
    <div className={styles.logoPartners}>
      <div className={styles.container}>
        <div className={styles.titleContainer}>
          <h1>{title}</h1>
        </div>
        <div className={styles.logosContainer}>
          {logos?.map((element, id) => {
            return (
              <div key={id} className={styles.colLogos}>
                {element?.map((logo, idx) => {
                  return <PartnerRelationshipsItem key={idx} logo={logo} />;
                })}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default PartnerRelationships;