import React from 'react';
import { Svg, Path } from 'react-native-svg';
import { Dimensions, Platform } from 'react-native';
import { theme } from '../../app/theme';
import {
  getQuadBezierCurveArcArea,
  getQubicBezierCurveArcArea,
} from '../transducers';
import { TColor } from '../types';

type TProps = {
  type?: 'quad' | 'cubic';
  fill?: TColor;
};

/*
 * About curves
 * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
 *
 * Build curve
 * - quad https://svg-art.ru/?p=1116
 * - qubic https://svg-art.ru/?p=1114
 *
 * Sandbox
 * https://jsbin.com/wusunumeqo/1/edit?html,output
 * */
export const Arc: React.FC<TProps> = props => {
  const { type, fill } = props;
  const { width } = Dimensions.get('window');
  const widthInt = Math.round(width);
  const height = 30;
  const qubicHeight = 40;

  const d =
    type === 'quad'
      ? getQuadBezierCurveArcArea(widthInt, height)
      : getQubicBezierCurveArcArea(widthInt, height, qubicHeight);

  const viewBox = Platform.OS === 'android' ? `0 0 ${widthInt} ${height}` : '';

  return (
    <>
      <Svg
        width={widthInt}
        height={height}
        viewBox={viewBox}
        preserveAspectRatio="none"
      >
        <Path d={d} fill={theme.colors[fill!] || fill} />
      </Svg>
    </>
  );
};

Arc.defaultProps = {
  type: 'quad',
  fill: 'ebonyClay',
};