import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import Avatar from "../../../components/Avatar";
import moment from "jalali-moment";

export const Target = ({ blogs, isMobile }) => {
  const Large = ({ blog }) => {
    return isMobile ? (
      <div className="flex flex-col w-full mb-10">
        <div
          className="relative w-full rounded-md overflow-hidden"
          style={{ height: "calc(100vh / 4.5)" }}
        >
          <img
            src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`}
            alt=""
            className="w-full h-full absolute left-0 top-0"
          />
          <div className="w-full h-full absolute left-0 top-0 bg-gradient-to-t from-black z-10"></div>
        </div>
        <strong className="font-bold my-3 leading-7 text-black dark:text-gray-200">
          {blog?.title}
        </strong>
        <div className="w-full flex justify-between">
          <div className="flex">
            {!blog?.author.picFileId && <Avatar size={60} />}
            {blog?.author.picFileId && (
              <img
                src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`}
                alt="author"
                className="w-20 rounded"
              />
            )}
            <div className="flex flex-col py-1 mr-1 justify-center">
              <strong className="text-opacity-75 text-tiny  text-black dark:text-gray-200">
                {window.t("نوشته از:" + " " + `${blog?.author.name}`)}
              </strong>
              <p className="text-black text-sm text-opacity-75 mt-2 dark:text-gray-200">
                {blog?.author.role}
              </p>
            </div>
          </div>
          <div className="flex flex-col i justify-center items-end">
            <span className="lg:text-tiny text-gray1 lg:font-black">
              {window.t("زمان مطالعه:") +
                " " +
                `${blog?.duration}` +
                " " +
                window.t("دقیقه")}
            </span>
            <span className="mt-3 lg:text-tiny text-gray1 lg:font-black">
              {moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")}
            </span>
          </div>
        </div>
      </div>
    ) : (
      <Link
        to={"/blogs/" + blog?.id}
        className="lg:w-1/2 relative rounded-md overflow-hidden"
        style={{ height: "calc(100vw / 12  * 11 / 2 * 9 / 14)" }}
      >
        <img
          src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`}
          alt=""
          className="w-full h-full absolute left-0 top-0"
        />
        <div className="w-full h-full from-black z-10 absolute left-0 top-0 bg-gradient-to-t flex flex-col justify-end pb-5 px-5">
          <strong className="lg:text-3xl bold mb-7 leading-7 text-white">
            {blog?.title}
          </strong>
          <div className="w-full flex justify-between">
            <div className="flex">
              {!blog?.author.picFileId && <Avatar size={60} />}
              {blog?.author.picFileId && (
                <img
                  src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`}
                  alt="author"
                  className="w-20 rounded"
                />
              )}
              <div className="flex flex-col py-2 mr-2 justify-center">
                <strong className="lg:text-tiny lg:font-black text-opacity-75 text-white">
                  {window.t("نوشته از:" + " " + `${blog?.author.name}`)}
                </strong>
                <p className="lg:text-sm lg:font-semibold text-white text-opacity-75 mt-2">
                  {blog?.author.role}
                </p>
              </div>
            </div>
          </div>
        </div>
      </Link>
    );
  };

  const Small = ({ blogs }) => {
    return (
      <div className="w-full lg:w-1/2 flex flex-wrap lg:flex-col justify-between">
        {blogs.map((blog, index) => (
          <Link
            to={"/blogs/" + blog.id}
            key={index}
            className="lg:mb-0 mb-3 flex flex-col lg:flex-row lg:gap-2"
            style={{ width: isMobile ? "48%" : "100%" }}
          >
            <img
              src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`}
              alt=""
              style={{
                height: isMobile
                  ? "calc(100vh / 8)"
                  : "calc(100vw / 12  * 11 / 2 * 9 / 14 / 3.4)",
                width: isMobile
                  ? "100%"
                  : "calc(100vw / 12  * 11 / 2 * 9 / 14 / 3 * 16 / 10)",
              }}
              className="rounded-md"
            />
            <div className="flex flex-col justify-center lg:gap-4">
              <strong className="lg:font-bold lg:text-lg text-tiny my-2 leading-5 dark:text-gray-200">
                {blog?.title}
              </strong>

              <div
                className="lg:w-4/5 text-gray70 lg:text-tiny text-tiny leading-5 lg:leading-6 dark:text-gray-200 text-justify"
                dangerouslySetInnerHTML={{ __html: blog?.text }}
              />
            </div>
          </Link>
        ))}
      </div>
    );
  };
  return (
    <div className="flex flex-col lg:flex-row lg:gap-10">
      <Large blog={blogs[0]} />
      <Small blogs={blogs?.slice(0, 3)} />
    </div>
  );
};

const mapStateToProps = (state) => ({
  isMobile: state.publicApi.isMobile,
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(Target);