import { css } from 'glamor';
import { HiCheckCircle } from 'react-icons/hi';
import { AiFillDownCircle } from 'react-icons/ai';
import { scrollToView } from '..';
import React from 'react';

const styles = {
  designSection: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#1f1f1f',
    minHeight: '100vh',
    padding: '100px 0',
    fontFamily: 'inherit'
  },
  design: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  timelineEmpty: {},
  timelineCircle: {
    // position: "absolute",
    top: '-10px',
    left: '50%',
    width: '20px',
    height: '20px',
    borderRadius: '50%',
    backgroundImage: 'linear-gradient(45deg, #F27121, #E94057, #8A2387)',
    WebkitTransform: 'translateX(-50%)',
    transform: 'translateX(-50%)'
  },
  timeline: {
    width: '80%',
    height: 'auto',
    maxWidth: '800px',
    margin: '0 auto',
    display: 'grid',
    gridTemplateColumns: '1fr 3px 1fr'
  },
  timelineMiddle: {
    position: 'relative',
    backgroundImage: 'linear-gradient(45deg, #00f030, #666, #777)',
    width: '3px',
    height: '100%'
  },
  timelineMiddleCurrent: {
    position: 'relative',
    width: '3px',
    height: '100%',
    backgroundImage: 'linear-gradient(45deg, #F27121, #E94057, #8A2387)'
  },
  timelineContent: {
    padding: ['20px', '1.75rem'],
    background: '#1f1f1f',
    WebkitBoxShadow: '5px 5px 10px #1a1a1a, -5px -5px 10px #242424',
    boxShadow: '5px 5px 10px #1a1a1a, -5px -5px 10px #242424',
    borderRadius: ['5px', '6px'],
    color: 'white',
    transition: '0.4s ease',
    overflowWrap: 'break-word',
    margin: '1rem',
    marginBottom: '20px'
  },
  timelineComponent: {
    margin: '0px 20px 20px 20px'
  },
  title: {
    fontFamily: "'DM Sans', sans-serif",
    fontWeight: 500
  }
};

const GradientTextStyle = {
  fontFamily: "'DM Sans', sans-serif",
  background: 'linear-gradient(45deg, #F27121, #E94057, #8A2387)',
  fontWeight: 700,
  fontSize: '72px',
  WebkitTextFillColor: 'transparent',
  WebkitBackgroundClip: 'text'
};

export const Timeline: React.FC<{
  steps: React.ReactNode[];
  currentIndex: number;
}> = ({ steps, currentIndex }) => {
  scrollToView(currentIndex.toFixed(0));
  return (
    <section {...css(styles.designSection)}>
      <div {...css(styles.timeline)}>
        {steps.map((step, index) => {
          const done = index < currentIndex;
          const stepStyle = done ? { opacity: 0.2 } : {};
          const middleStyle =
            index === currentIndex
              ? styles.timelineMiddleCurrent
              : styles.timelineMiddle;
          const currentTextStyle =
            index === currentIndex ? GradientTextStyle : {};
          if (index % 2 == 0) {
            return (
              <>
                <div {...css(styles.timelineEmpty)}></div>
                <div {...css(middleStyle)}>
                  <TimelineCircle currentIndex={currentIndex} index={index} />
                </div>
                <div
                  {...css(
                    styles.timelineComponent,
                    styles.timelineContent,
                    stepStyle
                  )}
                >
                  <h3
                    id={index.toFixed(0)}
                    {...css(styles.title, stepStyle, currentTextStyle)}
                  >
                    {step}
                  </h3>
                </div>
              </>
            );
          } else {
            return (
              <>
                <div
                  {...css(
                    styles.timelineComponent,
                    styles.timelineContent,
                    stepStyle
                  )}
                >
                  <h3
                    id={index.toFixed(0)}
                    {...css(styles.title, stepStyle, currentTextStyle)}
                  >
                    {step}
                  </h3>
                </div>
                <div {...css(middleStyle)}>
                  <TimelineCircle currentIndex={currentIndex} index={index} />
                </div>

                <div {...css(styles.timelineEmpty)}></div>
              </>
            );
          }
        })}
      </div>
    </section>
  );
};

const TimelineCircle: React.FC<{ currentIndex: number; index: number }> = ({
  currentIndex,
  index
}) => {
  const done = index < currentIndex;
  const current = index === currentIndex;
  return (
    <div
      {...css(
        styles.timelineCircle,
        done ? { background: 'green' } : { background: '#FFF' }
      )}
    >
      {done && (
        <div {...css({ color: '#00f030' })}>
          <HiCheckCircle size={20} />
        </div>
      )}
      {current && (
        <div {...css({ color: '#E94057' })}>
          <AiFillDownCircle size={20} />
        </div>
      )}
      {!done && !current && (
        <div {...css({ color: '#666' })}>
          <AiFillDownCircle size={20} />
        </div>
      )}
    </div>
  );
};