import React from 'react';
import { Shape } from '../../../common/components/shape';
import { SBox } from '../../../common/s-components/layout/s-box';
import { TVendor } from '../../../common/types';
import { theme } from '../../../app/theme';

export type TProps = {
  vendor: TVendor;
  pressed: boolean;
};

export const Wave: React.FC<TProps> = props => {
  const { vendor, pressed } = props;
  const colors =
    vendor === 'apple'
      ? theme.gradients.topChartsCardApple
      : vendor === 'spotify'
      ? theme.gradients.topChartsCardSpotify
      : theme.gradients.cornflower;

  const colorTop = colors[0];
  const colorBottom = colors[1];
  const opacity = pressed ? 0.7 : 1;

  return (
    <SBox opacity={opacity} position="absolute" zIndex={2}>
      <Shape
        name="wave2"
        gradient={[
          { offset: 0, color: colorTop, opacity: 1 },
          { offset: 1, color: colorBottom, opacity: 1 },
        ]}
        curveTopHeight={0}
        curveBottomHeight={140}
        maxHeight={95}
        data={[
          // photoshop zoom 300%
          { x: 0, y1: 0, y2: 168 },
          { x: 100, y1: 0, y2: 174 },
          { x: 200, y1: 0, y2: 178 },
          { x: 300, y1: 0, y2: 179 },
          { x: 400, y1: 0, y2: 177 },
          { x: 450, y1: 0, y2: 174 },
          { x: 500, y1: 0, y2: 170 },
          { x: 600, y1: 0, y2: 160 },
          { x: 700, y1: 0, y2: 150 },
          { x: 800, y1: 0, y2: 143 },
          { x: 900, y1: 0, y2: 140 },
          { x: 1000, y1: 0, y2: 140 },
          { x: 1100, y1: 0, y2: 145 },
          { x: 1200, y1: 0, y2: 151 },
          { x: 1300, y1: 0, y2: 149 },
          { x: 1400, y1: 0, y2: 136 },
          { x: 1500, y1: 0, y2: 124 },
        ]}
      />
    </SBox>
  );
};