import React from 'react';
import Svg, {
    Path,
    G,
    Mask,
    Defs,
    LinearGradient,
    Stop
} from 'react-native-svg';
import type { ThemeProps } from '../../../../branding/hoc/types';
import { withTheme } from '../../../../branding';

export const Chart = ({ colors }: ThemeProps) => (
    <Svg width={285} height={170} viewBox="0 0 285 170" fill="none">
        <Mask id="a" x={0} y={0} width={285} height={170}>
            <Path d="M0 0h285v170H0V0z" fill={colors.gray0} />
        </Mask>
        <G mask="url(#a)">
            <Path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M0 119.501c18.959-.325 26.987 15.886 46.242 15.999 18.827-.113 28.175-43.535 47.827-43.997 19.985.462 24.233 26.003 48.431 18.999 24.198-7.004 25.363-78.498 48.431-78.498 23.069 0 28.219 37.517 47.5 44.505 19.282 6.989 29.804-15.001 46.569-18V170H0v-50.499z"
                fill="url(#chartBackgroundGradient)"
            />
            <Path
                d="M-1 119.501c18.963-.325 27.96 15.886 47.22 15.999 18.831-.113 28.18-43.535 47.837-43.997 19.99.462 24.239 26.003 48.443 18.999 24.204-7.004 25.386-78.498 48.443-78.498s28.225 37.517 47.511 44.505c19.286 6.989 30.777-15.001 47.546-18"
                stroke="url(#chartLineGradient)"
                strokeWidth={3}
            />
        </G>
        <Defs>
            <LinearGradient
                id="chartBackgroundGradient"
                x1={47.9243}
                y1={32.004}
                x2={47.9243}
                y2={170}
                gradientUnits="userSpaceOnUse"
            >
                <Stop
                    stopColor={
                        colors.walkthroughTrackAnalyticsChartGradientStart
                    }
                />
                <Stop
                    offset={1}
                    stopColor={
                        colors.walkthroughTrackAnalyticsChartGradientStop
                    }
                    stopOpacity={0.4}
                />
            </LinearGradient>
            <LinearGradient
                id="chartLineGradient"
                x1={-95.6259}
                y1={32.004}
                x2={-95.6259}
                y2={135.5}
                gradientUnits="userSpaceOnUse"
            >
                <Stop
                    stopColor={
                        colors.walkthroughTrackAnalyticsChartGradientStart
                    }
                />
                <Stop
                    offset={1}
                    stopColor={
                        colors.walkthroughTrackAnalyticsChartGradientStop
                    }
                />
            </LinearGradient>
        </Defs>
    </Svg>
);

export default withTheme(Chart);