import React from 'react';
import { Platform } from 'react-native';
import { SBox } from '../../common/s-components/layout/s-box';
import { Arc } from '../../common/components/arc';
import { SHeaderGradient } from '../../track/s-components/s-header-gradient';
import { getDefaultStatusBarHeight } from '../../common/transducers';
import { TColor } from '../../common/types';

type TProps = {
  bg?: TColor;
  arcBg?: TColor;
  gradient: string[];
  locations?: number[];
  topOffset?: number;
  statusBarHeight?: boolean;
};

export const BgArc: React.FC<TProps> = props => {
  const { bg, gradient, locations, topOffset, arcBg, statusBarHeight } = props;
  const isIos = Platform.OS === 'ios';
  const iosOffset = getDefaultStatusBarHeight() < 44 ? 249 : topOffset;
  const topArcOffset = isIos && statusBarHeight ? iosOffset : topOffset;
  const acrHeight = 30;

  return (
    <>
      {gradient ? (
        <SHeaderGradient
          bottom={0}
          width={1}
          height={386}
          top={topOffset! + acrHeight}
          colors={gradient}
          locations={locations}
          bg={arcBg}
        />
      ) : (
        <SBox
          position="absolute"
          top={289}
          bottom={0}
          width={1}
          height="150%"
          bg={bg}
        />
      )}
      <SBox position="absolute" top={topArcOffset}>
        <Arc fill={bg} />
      </SBox>
    </>
  );
};

BgArc.defaultProps = {
  bg: 'ebonyClay',
  // gradient: undefined,
  locations: [0, 0.7, 1],
  topOffset: 259,
  // arcBg: undefined,
  statusBarHeight: true,
};