import styles from './OurSolutionsWithLink.module.scss';
import Link, { LinkFontWeight, LinkSizeText } from '../Link';
import { Link as LinkI } from '../../models/common';
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { isInitialLoaderVisible } from '../../api/storage';
import { ThemeOverflow } from '../../redux/reducers/themeReducer/model';
import { RootState } from '../../redux/store';
import AnimatedPhrase from '../AnimatedPhrase';

export type Props = {
  title: string;
  services?: LinkI[];
  textServices?: string;
  description: string;
  link?: LinkI;
  isList: boolean;
  isCentered?: boolean;
};

const OurSolutionsWithLink = (props: Props): JSX.Element => {
  const {
    title,
    services,
    textServices,
    description,
    isList,
    link,
    isCentered = true,
  } = props;
  const { isVisible } = useSelector((state: RootState) => ({
    ...state.initialLoader,
  }));
  const isLoaderVisible = isVisible || isInitialLoaderVisible();

  const [state, setState] = useState({
    overflow: ThemeOverflow.HIDDEN,
    mounted: false,
  });

  useEffect(() => {
    if (state.mounted) {
      setState((preState) => ({
        ...preState,
        overflow: ThemeOverflow.VISIBLE,
      }));
    }
  }, [state.mounted]);

  useEffect(() => {
    if (!isLoaderVisible)
      setState((preState) => ({ ...preState, mounted: true }));
  }, [isLoaderVisible]);

  return (
    <div className={styles.ourSolutionsWithLink}>
      <div
        className={`${styles.ourSolutionsWithLinkContainer} ${
          isCentered ? styles.center : ''
        } ${!isList ? styles.ourSolutionsWithLinkContainerCapabilities : ''}`}
      >
        <div className={styles.titleContainer}>
          <h1>
            <AnimatedPhrase phrase={title} />
          </h1>
        </div>
        <div className={styles.container}>
          {isList && (
            <div
              className={`text_5 ${styles.description} ${
                !isList ? styles.descriptionWithList : ''
              }`}
            >
              {description}
            </div>
          )}
          {!isList && (
            <div
              className={`h4_links ${styles.description} ${
                !isList ? styles.descriptionWithList : ''
              }`}
            >
              {description}
            </div>
          )}

          <div
            className={`${styles.services} ${
              !isList ? styles.descriptionWithList : ''
            }`}
          >
            {isList && (
              <>
                <ol>
                  {services?.map((service, id) => (
                    <li key={id}>
                      <span>{id + 1}</span>
                      <Link
                        href={service.url}
                        textSize={LinkSizeText.SMALL}
                        fontWeight={LinkFontWeight.NORMAL}
                      >
                        {service.label}
                      </Link>
                    </li>
                  ))}
                </ol>
                <div className={styles.linkServices}>
                  {link?.url && (
                    <Link
                      href={link?.url}
                      type={link.style?.type}
                      iconSize={link.style?.iconSize}
                      textSize={link.style?.textSize}
                      isIconFirst={link.style?.isIconFirst}
                      isExternal={link.isExternal}
                    >
                      {link?.label}
                    </Link>
                  )}
                </div>
              </>
            )}
            {!isList && <div className="text_5">{textServices}</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

export default OurSolutionsWithLink;