import React, { useState, useEffect } from 'react';
import styles from '../WorkList/WorkList.module.scss';
import { fetchPosts } from '../../api/blog';
import {
  BlockBlogArticle,
  BlogResponse,
  BlogResponseMeta,
} from '../../models/page';
import { motion, useAnimation } from 'framer-motion';
import { useRouter } from 'next/dist/client/router';
import useTranslation from 'next-translate/useTranslation';
import ImageTitleTextAndLink, {
  ImageTitleTextAndLinkPosition,
  ImageTitleTextAndLinkSize,
} from '../ImageTitleTextAndLink';
import { LinkSizeIcon, LinkSizeText, LinkType } from '../Link';

export type Props = {
  menus: string[];
  list?: BlogResponse;
};

const lineVariants = {
  loading: {
    d: 'M 16 43 16 43 Z',
    transition: {
      duration: 0.3,
      delay: 0.3,
    },
  },
  initial: {
    d: 'M 16 0 16 41 Z',
    transition: {
      duration: 0.5,
    },
  },
  show: {
    y: '0%',
    transition: {
      duration: 0.5,
      delay: 0.5,
    },
  },
};

const circleVariants = {
  loading: {
    pathLength: 1,
    transition: {
      duration: 1,
      delay: 0.4,
    },
  },
  initial: {
    pathLength: 0,
  },
  show: {
    pathLength: 0,
    transition: {
      duration: 1,
    },
  },
};

const chevron1Variants = {
  loading: {
    d: 'M 13.4 0.141 13.4 14',
    transition: {
      duration: 0.3,
    },
    transitionEnd: { display: 'none' },
  },
  initial: {
    d: 'M -0.24 0.368 14.2 14',
    transition: {
      duration: 0.3,
      delay: 0.3,
    },
  },
  show: {
    y: '0%',
    display: 'block',
    transition: {
      duration: 0.5,
      delay: 0.5,
    },
  },
};

const chevron2Variants = {
  loading: {
    d: 'M 0 0 0 14',
    transition: {
      duration: 0.3,
    },
    transitionEnd: { display: 'none' },
  },
  initial: {
    d: 'M 13.918 -0.194 -0.614 14',
    transition: {
      duration: 0.3,
      delay: 0.3,
    },
  },
  show: {
    y: '0%',
    display: 'block',
    transition: {
      duration: 0.5,
      delay: 0.5,
    },
  },
};

const WorkList = (props: Props): JSX.Element => {
  /* const { menus } = props; */
  const router = useRouter();
  const { t } = useTranslation();

  const [blogListMeta, setBlogListMeta] = useState<
    BlogResponseMeta | undefined
  >(props?.list?.meta || undefined);
  const [loading, setLoading] = useState(false);
  /* const [filter, setFilter] = useState(menus[0]); */
  const [blogList, setBlogList] = useState<BlockBlogArticle[]>(
    props?.list?.data || []
  );
  const controlsCircle = useAnimation();
  const controlsChevron1 = useAnimation();
  const controlsChevron2 = useAnimation();
  const controlsLine = useAnimation();

  const handleFilter = async (menu: string) => {
    /* const result = await fetch(`/api/blogList/${page}`)
      .then((res) => res.json())
      .catch((e) => Promise.reject(e));
    const blogList = result.blogList; */
    /* setFilter(menu); */
    // setBlogList(blogList);
  };

  const handleLoadMore = async () => {
    if (loading) return;
    try {
      setLoading(true);
      controlsCircle.set({ transform: 'rotate(180deg)' });
      controlsCircle.start('loading');
      controlsLine.start('loading');
      controlsChevron1.start('loading');
      controlsChevron2.start('loading');
      const result = await fetchPosts(
        router.locale !== router.defaultLocale ? router.locale + '/' : '',
        (blogListMeta?.current_page || 1) + 1
      );
      await new Promise((resolve) => setTimeout(resolve, 1300)); //1300
      const _blogList = result.data.map((work, id) => ({
        ...work,
        image: { ...work.image, priority: id < 4 },
      }));
      setBlogList([...blogList, ..._blogList]);
      setBlogListMeta(result.meta);
    } finally {
      controlsLine.set({ y: '-100%', d: lineVariants.initial.d });
      controlsChevron1.set({
        y: '-100%',
        d: chevron1Variants.initial.d,
      });
      controlsChevron2.set({
        y: '-100%',
        d: chevron2Variants.initial.d,
      });
      controlsLine.start('show');
      controlsChevron1.start('show');
      controlsChevron2.start('show');
      controlsCircle.set({ transform: 'rotate(180deg) rotateY(180deg)' });
      controlsCircle.start('show');
      setLoading(false);
    }
  };

  useEffect(() => {
    setBlogList(props?.list?.data || []);
  }, [, props?.list?.data]);

  return (
    <div className={styles.container}>
      <div className="list">
        {blogList.map((post, key) => (
          <ImageTitleTextAndLink
            key={key}
            {...{
              ...post,
              link: {
                url: `/blog/${post.url}`,
                label: 'Read further',
                style: {
                  iconSize: LinkSizeIcon.XMEDIUM,
                  isIconFirst: true,
                  textSize: LinkSizeText.MEDIUM,
                  type: LinkType.TOP_RIGHT_ARROW_ICON,
                },
              },
              isImageFirst: !!(key % 2 === 0),
              position:
                key % 2 === 0
                  ? ImageTitleTextAndLinkPosition.LEFT
                  : ImageTitleTextAndLinkPosition.RIGHT,
              imageSize:
                key % 2 === 0
                  ? ImageTitleTextAndLinkSize.SMALL
                  : ImageTitleTextAndLinkSize.LARGE,
            }}
          />
        ))}
      </div>

      {blogListMeta?.current_page !== blogListMeta?.last_page &&
        blogList?.length && (
          <div
            onClick={() => {
              handleLoadMore();
            }}
          >
            <div className={styles.nextLoadMore}>
              <div className={styles.content}>
                <h2>{t('common:work.button.load-more')}</h2>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="46"
                  height="46"
                  viewBox="0 0 46 46"
                >
                  <g id="arrow" transform="translate(-36.608 0.392)">
                    <g
                      id="Path_1"
                      data-name="Path 1"
                      transform="translate(38 1)"
                    >
                      <motion.path
                        id="Path_2"
                        data-name="Path 2"
                        d="M21.611,0A21.611,21.611,0,1,1,0,21.611,21.611,21.611,0,0,1,21.611,0Z"
                        fill="rgba(39,102,196,0)"
                        stroke="#2766c4"
                        strokeWidth="2.7"
                        initial={'initial'}
                        animate={controlsCircle}
                        variants={circleVariants}
                      />
                    </g>
                  </g>
                  <g>
                    <g
                      id="Line_1"
                      data-name="Line 1"
                      transform="translate(6.961 2.623)"
                    >
                      <motion.path
                        id="Line_1-2"
                        data-name="Line 1"
                        d="M 16 0 16 39 Z"
                        fill="none"
                        stroke="#2766c4"
                        strokeWidth="2.7"
                        initial={'initial'}
                        animate={controlsLine}
                        variants={lineVariants}
                      />
                    </g>
                    <g transform="translate(9.1 30.203)">
                      <motion.path
                        id="Path_3"
                        data-name="Path 3"
                        d="M-.24.368,14.2,14.821"
                        fill="none"
                        stroke="#2766c4"
                        strokeWidth="2.7"
                        initial={'initial'}
                        animate={controlsChevron1}
                        variants={chevron1Variants}
                      />
                    </g>
                    <g transform="translate(22.657 30.67)">
                      <motion.path
                        id="Path_4"
                        data-name="Path 4"
                        d="M13.206-.194-.614,13.574"
                        fill="none"
                        stroke="#2766c4"
                        strokeWidth="2.7"
                        initial={'initial'}
                        animate={controlsChevron2}
                        variants={chevron2Variants}
                      />
                    </g>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        )}
    </div>
  );
};

export default WorkList;