import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import { Col, Row } from 'react-bootstrap';
import { FiChevronLeft } from 'react-icons/fi';
import style from './index.module.scss';

interface SimpleLayoutProps {
  children: React.ReactNode;
}

const SimpleLayout = ({ children }: SimpleLayoutProps) => {
  const router = useRouter();

  useEffect(() => {
    document.getElementsByTagName('body')[0].style.backgroundColor = '#F6F8FA';
  }, []);

  useEffect(() => {
    let homePage = document.getElementById('simple-layout');

    if (router.pathname === '/user') {
      homePage?.classList.add('homePage');
    }

    const buttons = homePage?.getElementsByTagName('button');

    if (buttons) {
      Array.from(buttons).forEach((button) => {
        button.classList.add('UrbanistRegular');
      });
    }

    return () => {
      if (buttons) {
        Array.from(buttons).forEach((button) => {
          button.classList.remove('UrbanistRegular');
        });
      }
    };
  }, [router.pathname]);

  return (
    <>
      <Row
        id="simple-layout"
        className={`${style.simpleLayout} pt-5 pt-sm-0 justify-content-center align-items-center`}
      >
        <Col className="position-relative" xxl={8} md={10} xs={12}>
          <div
            className={`${style.backButton} cursor-pointer`}
            onClick={() => router.back()}
          >
            <FiChevronLeft color="#FFF" size={30} />
          </div>
          <div className="w-100 position-relative h-100 d-flex flex-column justify-content-center align-items-center">
            {children}
          </div>
        </Col>
      </Row>
    </>
  );
};

export default SimpleLayout;