import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom";
import History from "./History/index";

import book1 from "../../assets/images/book1.png";
import analytics from "../../assets/icons/analytics.svg";
import danger from "../../assets/icons/danger.svg";

import "./index.scss";

const maxDesktopSize = 1250;

const fontSize = {
  desktop: {
    h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 45,
    h2: window.innerWidth > maxDesktopSize ? 21 : window.innerWidth / 65,
    p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
    span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
    form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
  },
};

export default class Activation extends Component {
  state = {
    value: null,
  };
  render() {
    const { data } = this.props;
    return (
      <>
        {window.innerWidth > 1000 ? (
          <>
            <div className="activation d-flex flex-column align-items-center">
              <Navbar />
              <header className="activation__header d-flex flex-column align-items-center">
                <img src={analytics} alt="فعال سازی کتاب" />
                <h1 style={{fontSize: fontSize.desktop.h1 }}>فعال سازی کتاب الکترونیک</h1>
              </header>
              <div className="activation__description d-flex">
                <span>.</span>
                <p style={{ fontSize: fontSize.desktop.p }}>
                  کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
                  وارد تا کتاب الکترونیک آن فعالسازی شود
                </p>
              </div>
              <form
                className="activation__form d-flex"
                onSubmit={() => console.log()}
              >
                <input
                  id="code"
                  type="text"
                  maxLength={9}
                  autoComplete="off"
                  onChange={(e) => this.setState({ code: e.target.value })}
                  style={{fontSize: fontSize.desktop.form }}
                />
                <button style={{fontSize: fontSize.desktop.form }} type="submit">ثبت کد فعال سازی</button>
              </form>
              <div className="activation__support d-flex align-center">
                <span>
                  <img src={danger} />
                </span>
                <p style={{ fontSize: fontSize.desktop.p }}>
                  کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
                  وارد تا کتاب الکترونیک آن فعالسازی شود
                </p>
              </div>
              <div className="activation__history d-flex flex-column">
                <h2  style={{fontSize: fontSize.desktop.h2 }}>آخرین مشاهدات</h2>
                {data.map((item, i) => (
                  <History data={item} key={i} />
                ))}
              </div>
            </div>
            <Footer />
          </>
        ) : null}
        {window.innerWidth < 1000 ? (
          <div className="mobile-activation d-flex flex-column align-items-center">
            <Navbar />
            <div className="mobile-activation__back d-flex">
              <Link to="/">بازگشت</Link>
            </div>
            <header className="mobile-activation__header d-flex flex-column align-items-center">
              <img src={analytics} alt="فعال سازی کتاب" />
              <h1>فعال سازی کتاب الکترونیک</h1>
            </header>
            <div className="mobile-activation__description d-flex">
              <span>.</span>
              <p>
                کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
                وارد تا کتاب الکترونیک آن فعالسازی شود
              </p>
            </div>
            <form
              className="mobile-activation__form d-flex flex-column"
              onSubmit={() => console.log()}
            >
              <input
                id="code"
                type="text"
                maxLength={9}
                autoComplete="off"
                onChange={(e) => this.setState({ code: e.target.value })}
              />
              <button type="submit">ثبت کد فعال سازی</button>
            </form>
            <div className="mobile-activation__support d-flex align-center">
              <span>
                <img src={danger} />
              </span>
              <p>
                کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد
                وارد تا کتاب الکترونیک آن فعالسازی شود
              </p>
            </div>
            <div className="mobile-activation__history d-flex flex-column">
              <h2>آخرین مشاهدات</h2>
              {data.map((item, i) => (
                <History data={item} key={i} />
              ))}
            </div>
          </div>
        ) : null}
      </>
    );
  }
}

Activation.defaultProps = {
  data: [
    {
      title: "ریاضیات گسسته خیلی پیشرفته",
      subTitle: "پایه هفتم ابتدایی",
      status: "انجام شد",
      image: book1,
    },
  ],
};