import React, { useEffect, useState } from "react";

import { NavPanel } from "../components/nav-panel";
import logo from "../assets/logo_1x.png";
import cucumber from "../assets/cucumber.png";
import logo2x from "../assets/logo_2x.png";
import logo4x from "../assets/logo_4x.png";
import { Link } from "../components/link";
import { Card } from "../components/card";
import { Header1 } from "../components/common";
import { ErrorBoundary } from "../components/error-boundary";
import { URLs } from "../__data__/urls";

import {
  BrandText,
  Logo,
  Main,
  MainCardImg,
  MainCardText,
  MainCardTextP,
  MainCardWrapper,
  PageFooter,
  PageHeader,
} from "./style";

export const LandingPage = () => {
  const [data, setData] = useState([])
  useEffect(() => {
    fetch(`${URLs.api.main}/landing-data`)
    .then(response => response.json())
    .then(data => {
      setData(data.data)
    })
  }, [])

  return (
    <>
      <ErrorBoundary>
        <PageHeader>
          <Logo
            height="44px"
            width="227"
            src={logo4x}
            alt="Логотип. Надпись Рик и Морти"
            srcSet={`
            ${logo} 220w,
            ${logo2x} 445w,
            ${logo4x} 880w,
          `}
            sizes="
          (max-width: 240px) 100px,
          (min-width: 320px) 440px,
          (min-width: 520px) 880px
        "
          />
          <NavPanel currentNavElement={"Home"} />
        </PageHeader>
      </ErrorBoundary>
      <Main>
        <MainCardWrapper as="header">
          <MainCardText>
            <Header1>
              Персонажи из <br />
              <BrandText>огурчиковой вселенной</BrandText>
            </Header1>

            <MainCardTextP>
              На этой странице представлены персонажи из сериала “
              <Link href="#">Rick and Morty</Link>
              ”. Этот популярный анимационный сериал, созданный Джастином
              Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
              Санчеза, гениального и эксцентричного ученого, и его внука Морти
              Смита.
            </MainCardTextP>
          </MainCardText>
          <MainCardImg src={cucumber} alt="" />
        </MainCardWrapper>
        <ErrorBoundary>
          <Cards cards={data} />
        </ErrorBoundary>
      </Main>

      <PageFooter></PageFooter>
    </>
  );
};

const Cards = ({ cards }) => {
  // const [value, setValue] = useState(0);
  // const card = cards[value];

  // const handleNextClick = () => {
  //   setValue(prevValue => (prevValue + 1) % cards.length);
  // };

  // const handleBackClick = () => {
  //   setValue((value) => (value - 1 + cards.length) % cards.length);
  // }

  // return (
  //   <>
  //     <div
  //       style={{
  //         marginTop: 24,
  //         display: "flex",
  //         justifyContent: "space-between",
  //         fontSize: "26px",
  //         padding: 10,
  //       }}
  //     >
  //       <Button style={{ visibility: value === 0 ? 'hidden' : 'visible' }} onClick={handleBackClick}>Назад</Button>
  //       {value !== cards.length - 1 && <Button onClick={handleNextClick}>Вперёд</Button>}
  //     </div>
  //     <Card
  //       directionReverse={value % 2 === 0}
  //       key={card.id}
  //       title={card.title}
  //       image={card.image}
  //       link={card.link}
  //       subTitle={card.subTitle}
  //     >
  //       {card.body}
  //     </Card>
  //   </>
  // );
  return cards.map((card, index) => (
    <Card
      directionReverse={index % 2 === 0}
      key={card.id}
      title={card.title}
      image={card.image}
      link={card.link}
      subTitle={card.subTitle}
    >
      {card.body}
    </Card>
  ));
};