import React, { useState, useEffect } from 'react';
import WorkDone, { WorkDoneItemProps } from '../WorkDone';
import styles from './WorkList.module.scss';
import { fetchProjects } from '../../api/projects';
import {
  BlockProject,
  ProjectsResponse,
  ProjectsResponseMeta,
} from '../../models/page';
import { motion, useAnimation } from 'framer-motion';
import { useRouter } from 'next/dist/client/router';
import useTranslation from 'next-translate/useTranslation';

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

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 [worksMeta, setWorksMeta] = useState<ProjectsResponseMeta | undefined>(
    props?.list?.meta || undefined
  );
  const [loading, setLoading] = useState(false);
  /* const [filter, setFilter] = useState(menus[0]); */
  const [works, setWorks] = useState<BlockProject[]>(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/works/${page}`)
      .then((res) => res.json())
      .catch((e) => Promise.reject(e));
    const works = result.works; */
    /* setFilter(menu); */
    // setWorks(works);
  };

  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 fetchProjects(
        router.locale !== router.defaultLocale ? router.locale + '/' : '',
        (worksMeta?.current_page || 1) + 1
      );
      await new Promise((resolve) => setTimeout(resolve, 1300)); //1300
      const _works = result.data.map((work, id) => ({
        ...work,
        image: { ...work.image, priority: id < 4 },
      }));
      setWorks([...works, ..._works]);
      setWorksMeta(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(() => {
    setWorks(props?.list?.data || []);
  }, [, props?.list?.data]);

  return (
    <div className={styles.container}>
      <div className="list">
        <WorkDone data={works as WorkDoneItemProps[]} />
      </div>

      {worksMeta?.current_page !== worksMeta?.last_page && works?.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;