import { Box, Link, Stack, Typography } from '@mui/material';
import Image from 'next/image';

import XSRF from './chrome_FgEZO9Esbd.png';
import PageLayoutPng from './PageLayout.png';
import BlankLayout from 'src/@core/layouts/BlankLayout';
import localStorageSavingLoadingCart from './localStorageSavingLoadingCart.png';
import UpdateShouldBeGreaterThanZero from './UpdateShouldBeGreaterThanZero.png';
import table_list from './table_list.png';
import signal_flow_of_paypal from './signal_flow_of_paypal.png';
import sql_injection_test from './sql_injection_test.png';
import TopologySvg from './topology.svg';
import SecureCookiesPng from './secure_cookies.png';

const SubTitle = ({ ...props }) => {
  return (
    <Typography variant="h5" style={{ fontWeight: 'bold' }}>
      {props.children}:
    </Typography>
  );
};

function Documentation() {
  return (
    <>
      <Box>
        <Typography variant="h4" sx={{ textDecoration: 'underline' }}>
          Documentation (README.md)
        </Typography>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>Topology:</SubTitle>
        </Box>
        <Box>
          <Image src={TopologySvg.src} width="400px" height="400px"></Image>
        </Box>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>frameowrk used / Credits:</SubTitle>
        </Box>
        <Stack direction="column">
          <Box>
            <ul>
              <li>React / Nextjs / next-csrf</li>
              <li>Ui framework: Material ui</li>
              <li>
                Themes:{' '}
                <a href="https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free">
                  materio-mui-react-nextjs-admin-template-free
                </a>
              </li>
              <li>request handler: axios / formik / formidable</li>
              <li>ORM: sequelize</li>
              <li>Misc lib: dotenv, crypto, </li>
            </ul>
          </Box>
        </Stack>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>Topology:</SubTitle>
        </Box>
        <Box>
          <Image src={SecureCookiesPng.src} width="1646px" height="406px"></Image>
        </Box>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>SQL injection test:</SubTitle>
        </Box>
        <Box>
          <Image src={sql_injection_test.src} width={1920 / 3} height={993 / 3}></Image>
        </Box>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>Paypal purchase flow:</SubTitle>
          <p>according to tutorial 7.pdf</p>
        </Box>
        <Box>
          <Image src={signal_flow_of_paypal.src} width="400px" height="400px"></Image>
        </Box>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>SQL injection</SubTitle>
        </Box>
        <Box>list of tables</Box>
        <Box>
          <Image src={table_list.src} width="400px" height="400px"></Image>
        </Box>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>Shopping Cart</SubTitle>
        </Box>
        <Box>
          <Box>
            <Box>
              <Typography variant="h6">User will be alerted if the number enter is zero</Typography>
            </Box>
          </Box>
          <Image src={UpdateShouldBeGreaterThanZero.src} width="400px" height="400px"></Image>
        </Box>

        <Box>
          <SubTitle>saving loading shopping cart across sessions</SubTitle>
        </Box>
        <Box>
          <Image src={localStorageSavingLoadingCart.src} width="400px" height="400px"></Image>

          <Box>
            <Box>
              <Typography variant="h6">Saving:</Typography>
              <Box>saving to localStorage occur on each cart update</Box>
            </Box>
            <Box mt={'1rem'}>
              <Typography variant="h6">loading:</Typography>
              <Box>loading from localStorage occur on each fresh site arriving</Box>
            </Box>
          </Box>
          <p>keyword: localStorage</p>
        </Box>
      </Box>

      <Box mt="2rem">
        <Box>
          <SubTitle>Page Layout</SubTitle>
        </Box>
        <Box>
          <p>Page Layout controlled by Nextjs Theme provider/toolset by default.</p>
          <Image src={PageLayoutPng.src} width="686px" height="128px"></Image>

          <p>keyword: nextjs</p>
        </Box>

        <Box>
          <SubTitle>NextJS</SubTitle>
        </Box>
        <Box>
          <p>
            As we're using nextjs, the role of Nginx and express ending processing http hosting were replaced by nextjs
            server
          </p>
          <p>keyword: nextjs</p>
        </Box>

        <Box>
          <SubTitle>XSRF</SubTitle>
        </Box>
        <Box>
          <p>XSRF is protected by "XSRF-TOKEN" in cookies, on every request.</p>
          <p>
            As cookies will pass along on every request(i.e. GET, POST, PUT, DELETE). Equivalently the end point is XSRF
            protected.
          </p>
          <p>keyword: next-xsrf</p>
        </Box>
        <div
          style={{
            backgroundImage: `url('${XSRF.src}')`,
            width: '100%',
            height: '600px',
            backgroundPosition: 'left',
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            borderRadius: '10px',
          }}
        ></div>
      </Box>

      <Box></Box>

      <Box></Box>

      <Box></Box>

      <Box mt="5rem">
        <SubTitle>Citation:</SubTitle>
        <Stack direction="column" gap="1rem" mt="2rem">
          <Stack>
            <Box>The basic setup of admin panel is following the given sample code from template provider</Box>
          </Stack>
        </Stack>
      </Box>

      <Box mt="5rem">
        <SubTitle>References</SubTitle>
        <Stack direction="column" gap="1rem" mt="2rem">
          <Stack>
            <Box>Theme</Box>
            <Box>
              <Link href="https://themeselection.com/item/materio-free-mui-nextjs-admin-template/">
                https://themeselection.com/item/materio-free-mui-nextjs-admin-template/
              </Link>
            </Box>
          </Stack>

          <Stack>
            <Box>next</Box>
            <Box>
              <Link href="https://nextjs.org/">https://nextjs.org/</Link>
            </Box>
          </Stack>

          <Stack>
            <Box>next-csrf</Box>
            <Box>
              <Link href="https://www.npmjs.com/package/next-csrf">https://www.npmjs.com/package/next-csrf</Link>
            </Box>
          </Stack>
        </Stack>
      </Box>
    </>
  );
}

export default Documentation;
