import React, { useEffect, useState } from 'react';
import { molecules } from 'components';
import Awesome from 'assets/images/awesome.png';
import './home.css';

function Home() {
  const [theme, setTheme] = useState(JSON.parse(localStorage.getItem('theme')));

  useEffect(() => {
    const preferTheme = window.matchMedia('(prefers-color-scheme: light)').matches; // prettier-ignore
    const savedTheme = localStorage.getItem('theme');

    if (!savedTheme) {
      setTheme(preferTheme);
      return localStorage.setItem('theme', preferTheme);
    }

    console.log(
      '%cMake Awesome things that matter!',
      'color:#ff2200; font-size:30px; font-weight: bold;'
    );
  }, []);

  return (
    <>
      <div className="logo">
        {<molecules.Button setTheme={setTheme} theme={theme} />}
      </div>
      <div className={theme ? 'home-body' : 'home-body dark-theme-primary'}>
        <div
          className={ theme ? 'main-content' : 'main-content dark-theme-secondary' } // prettier-ignore
        >
          <div className="left-content">
            <h1>We make awesome things that matter</h1>
            <h2>Just like this Awesome custom CRA template!</h2>
            <h3>
              The folder and file structures have already been organized and are
              ready to use. <br />
              This includes terminal code for adding new components; we
              basically set it all up for you.
            </h3>
            <h2>You can find more templates here.</h2>
            <div>
              <h3>With Redux ready template</h3>
              <div className={theme ? 'code' : 'code light-theme-secondary'}>
                <code>
                  {'>'} npx create-react-app app-name --template ipt-sun-redux
                </code>
                <br />
                <code>
                  {'>'} npx create-react-app app-name --template
                  ipt-sun-redux-crcf
                </code>
              </div>
            </div>
            <div>
              <h3>With React Context ready template</h3>
              <div className={theme ? 'code' : 'code light-theme-secondary'}>
                <code>
                  {'>'} npx create-react-app app-name --template ipt-sun-context
                </code>
                <br />
                <code>
                  {'>'} npx create-react-app app-name --template
                  ipt-sun-context-crcf
                </code>
              </div>
            </div>
            <a
              href="https://www.npmjs.com/package/cra-template-ipt-sun-crcf"
              target="_new"
              style={{ color: theme ? 'black' : 'white' }}
            >
              {'>'} Read Documentation
            </a>
          </div>
          <img src={Awesome} alt="awesome" />
        </div>
        <footer>&copy;ImPaulinTech | Sun Asterisk PH</footer>
      </div>
    </>
  );
}

export default Home;