import React from "react";
import styled from "styled-components";

/**
 *
 * @param {{type: 'extra-small' | 'small' | 'normal', count: number, lineWidth:string, playState: 'play' | 'paused' | 'stop' , color:string
 * }} prpos
 */
const AudioWaveComponent = ({
  type,
  count = 20,
  lineWidth,
  playState = "stop",
  color,
}) => {
  const getLine = () => {
    const list = [];

    for (let index = 0; index < count; index++) {
      const value = index + 1;
      if (value % 7 === 0) list.push("wave-delay-1");
      else if (value % 6 === 0) list.push("wave-delay-5");
      else if (value % 5 === 0) list.push("wave-delay-3");
      else if (value % 4 === 0) list.push("wave-delay-2");
      else if (value % 3 === 0) list.push("wave-delay-4");
      else if (value % 2 === 0) list.push("wave-delay-3");
      else list.push("wave-delay-2");
    }
    return list;
  };

  return (
    <Container className={type}>
      {getLine()?.map((i, idx) => {
        return (
          <li
            key={idx}
            style={
              lineWidth || color
                ? { width: lineWidth, background: color }
                : null
            }
            className={`wave ${i} ${playState}`}
          ></li>
        );
      })}
    </Container>
  );
};

export default AudioWaveComponent;

const Container = styled.ul`
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  width: fit-content;

  &.extra-small {
    height: 20px;
    gap: 5px;
    .wave {
      height: 8px;
      width: 2.5px;
      animation-name: ex_smail_pulse;
    }
  }
  &.small {
    height: 34px;
    gap: 8px;
    .wave {
      width: 3px;
      animation-name: smail_pulse;
    }
  }

  .wave {
    fill: #231f20;
    animation-name: pulse;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    width: 5px;
    height: 16px;
    flex-shrink: 0;
    overflow: hidden;
    y: 11px;
    border-radius: 100px;
    background: linear-gradient(180deg, #e5ad0e 0%, #fecf4c 100%);

    &.play {
      animation-play-state: running;
    }
    &.paused {
      animation-play-state: paused;
    }
    &.stop {
      animation-name: none;
    }
  }

  .wave-delay-5 {
    animation-delay: 1s;
  }
  .wave-delay-4 {
    animation-delay: 0.8s;
  }
  .wave-delay-3 {
    animation-delay: 0.6s;
  }
  .wave-delay-2 {
    animation-delay: 0.4s;
  }
  .wave-delay-1 {
    animation-delay: 0.2s;
  }

  @keyframes pulse {
    0%,
    100% {
      height: 16px;
      y: 11px;
    }
    50% {
      height: 52px;
      y: 0px;
    }
  }

  @keyframes smail_pulse {
    0%,
    100% {
      height: 16px;
      y: 11px;
    }
    50% {
      height: 34px;
      y: 0px;
    }
  }
  @keyframes ex_smail_pulse {
    0%,
    100% {
      height: 8px;
      y: 11px;
    }
    50% {
      height: 20px;
      y: 0px;
    }
  }
`;
