import React, { useEffect, useState } from 'react';
import { Dimensions, ScaledSize } from 'react-native';
import { Defs, LinearGradient, Path, Stop, Svg } from 'react-native-svg';
import { AngleGradient } from './angle-gradient';
import { getShapeArea } from '../transducers';
import { TShapeData } from '../types';

type TProps = {
  name: string;
  maxHeight: number;
  gradientAngle?: number;
  // wave image png
  // 300% zoom in Photoshop
  // xn = x(n - 1) + 100;
  // y1 = QuickLens height from top border to curve
  // or y1 = Photoshop height from top border to curve
  // x should be percentage value e.g. [0 .. 100]
  data: TShapeData[];
  // invision design screen png
  // 100% zoom in Photoshop + QuickLens height from top border to the lower part of the upper curve
  // or ~ Photoshop height/2
  curveTopHeight?: number;
  curveBottomHeight?: number;
  gradient: {
    color: string;
    offset?: number;
    opacity?: number;
  }[];
};

export const Shape: React.FC<TProps> = props => {
  const {
    name,
    gradientAngle,
    data,
    curveBottomHeight,
    curveTopHeight,
    maxHeight,
    gradient,
  } = props;
  const [width, setWidth] = useState(Dimensions.get('window').width);

  const onDimensionsChange = (e: { window: ScaledSize }) => {
    const { width } = e.window;
    setWidth(width);
  };

  useEffect(() => {
    const listener = Dimensions.addEventListener('change', onDimensionsChange);

    return () => {
      listener.remove();
    };
  }, []);

  const area = getShapeArea({
    width,
    data,
    curveBottomHeight: curveBottomHeight!,
    curveTopHeight: curveTopHeight!,
    maxHeight,
  });

  return (
    <Svg height={maxHeight} width={width}>
      <Defs>
        <AngleGradient angle={gradientAngle!}>
          {/*// @ts-ignore*/}
          <LinearGradient id={name}>
            {gradient.map(o => {
              return (
                <Stop
                  key={o.offset + o.color}
                  offset={o.offset}
                  stopColor={o.color}
                  stopOpacity={o.opacity}
                />
              );
            })}
          </LinearGradient>
        </AngleGradient>
      </Defs>

      <Path d={area!} fill={`url(#${name})`} />
    </Svg>
  );
};

Shape.defaultProps = {
  gradientAngle: 90,
  curveTopHeight: 0,
  curveBottomHeight: 0,
};