import React from 'react';
import { ThemedComponent } from '../../../branding/components/ThemeSwitch/ThemedComponent';
import {
    Circle,
    Defs,
    Ellipse,
    LinearGradient,
    Path,
    RadialGradient,
    Rect,
    Stop,
    Svg
} from 'react-native-svg';

const OrchardDarkEmptyPlaylists = () => (
    <Svg width="101" height="100" viewBox="0 0 101 100" fill="none">
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M29.6016 22.0032C29.6016 21.451 30.0493 21.0032 30.6016 21.0032H34.8817C36.218 21.0032 36.8873 22.6189 35.9423 23.5639L32.503 27.0032H35.6664C36.2186 27.0032 36.6664 27.451 36.6664 28.0032C36.6664 28.5555 36.2186 29.0032 35.6664 29.0032H31.2959C29.9595 29.0032 29.2903 27.3875 30.2352 26.4426L33.6746 23.0032H30.6016C30.0493 23.0032 29.6016 22.5555 29.6016 22.0032Z"
            fill="#F18638"
        />
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.9585 12.975C10.7053 12.2835 11.0605 11.5177 11.752 11.2644L18.2557 8.88241C19.9288 8.26962 21.5076 9.9856 20.7579 11.602L17.2354 19.1957L22.3598 17.3189C23.0513 17.0656 23.8171 17.4209 24.0704 18.1123C24.3236 18.8038 23.9684 19.5696 23.2769 19.8229L16.6412 22.2532C14.9681 22.866 13.3893 21.15 14.1391 19.5337L17.6615 11.9399L12.6691 13.7684C11.9776 14.0217 11.2118 13.6664 10.9585 12.975Z"
            fill="#F18638"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="#7CB5DE"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="url(#paint0_linear_489_11435)"
        />
        <Circle cx="46.1237" cy="59.5009" r="19.9245" fill="#F2F8FC" />
        <Circle cx="75.8796" cy="44.2773" r="4.98112" fill="#A5CDE9" />
        <Path
            d="M75.2704 44.5569C74.919 44.5569 74.6341 44.8419 74.6341 45.1933V74.4437H74.025C73.6736 74.4437 73.3887 74.7286 73.3887 75.08V78.7884C73.3887 79.1399 73.6736 79.4248 74.025 79.4248H77.7334C78.0849 79.4248 78.3698 79.1399 78.3698 78.7884V75.08C78.3698 74.7286 78.0849 74.4437 77.7334 74.4437H77.1246V45.1933C77.1246 44.8419 76.8397 44.5569 76.4883 44.5569H75.2704Z"
            fill="#F2F8FC"
        />
        <Circle cx="46.1253" cy="59.5592" r="2.49056" fill="#7CB5DE" />
        <Ellipse
            cx="50.5"
            cy="89.4046"
            rx="35"
            ry="2.5"
            fill="url(#paint1_radial_489_11435)"
            fillOpacity="0.3"
        />
        <Defs>
            <LinearGradient
                id="paint0_linear_489_11435"
                x1="82.5671"
                y1="71.1153"
                x2="69.8776"
                y2="88.5938"
                gradientUnits="userSpaceOnUse"
            >
                <Stop stopColor="#A5CDE9" stopOpacity="0.05" />
                <Stop offset="0.295" stopColor="#A5CDE9" stopOpacity="0.4" />
                <Stop offset="0.505" stopColor="#A5CDE9" stopOpacity="0.7" />
                <Stop offset="0.735" stopColor="#A5CDE9" stopOpacity="0.4" />
                <Stop offset="1" stopColor="#A5CDE9" stopOpacity="0.05" />
            </LinearGradient>
            <RadialGradient
                id="paint1_radial_489_11435"
                cx="0"
                cy="0"
                r="1"
                gradientUnits="userSpaceOnUse"
                gradientTransform="translate(50.5 89.4046) rotate(90) scale(2.5 35)"
            >
                <Stop offset="0.35" stopColor="#7CB5DE" />
                <Stop offset="1" stopColor="#7CB5DE" stopOpacity="0" />
            </RadialGradient>
        </Defs>
    </Svg>
);

const AwalDarkEmptyPlaylists = () => (
    <Svg width="101" height="100" viewBox="0 0 101 100" fill="none">
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M29.6016 22.0032C29.6016 21.451 30.0493 21.0032 30.6016 21.0032H34.8817C36.218 21.0032 36.8873 22.6189 35.9423 23.5639L32.503 27.0032H35.6664C36.2186 27.0032 36.6664 27.451 36.6664 28.0032C36.6664 28.5555 36.2186 29.0032 35.6664 29.0032H31.2959C29.9595 29.0032 29.2903 27.3875 30.2352 26.4426L33.6746 23.0032H30.6016C30.0493 23.0032 29.6016 22.5555 29.6016 22.0032Z"
            fill="#F097CE"
        />
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.9585 12.975C10.7053 12.2835 11.0605 11.5177 11.752 11.2644L18.2557 8.88241C19.9288 8.26962 21.5076 9.9856 20.7579 11.602L17.2354 19.1957L22.3598 17.3189C23.0513 17.0656 23.8171 17.4209 24.0704 18.1123C24.3236 18.8038 23.9684 19.5696 23.2769 19.8229L16.6412 22.2532C14.9681 22.866 13.3893 21.15 14.1391 19.5337L17.6615 11.9399L12.6691 13.7684C11.9776 14.0217 11.2118 13.6664 10.9585 12.975Z"
            fill="#F097CE"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="#C38DCE"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="url(#paint0_linear_489_30024)"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="url(#paint1_linear_489_30024)"
        />
        <Circle cx="46.1237" cy="59.5009" r="19.9245" fill="#FBF8FC" />
        <Circle cx="75.8796" cy="44.2773" r="4.98112" fill="#D6B0DD" />
        <Path
            d="M75.2704 44.5569C74.919 44.5569 74.6341 44.8419 74.6341 45.1933V74.4437H74.025C73.6736 74.4437 73.3887 74.7286 73.3887 75.08V78.7884C73.3887 79.1399 73.6736 79.4248 74.025 79.4248H77.7334C78.0849 79.4248 78.3698 79.1399 78.3698 78.7884V75.08C78.3698 74.7286 78.0849 74.4437 77.7334 74.4437H77.1246V45.1933C77.1246 44.8419 76.8397 44.5569 76.4883 44.5569H75.2704Z"
            fill="#FBF8FC"
        />
        <Circle cx="46.1253" cy="59.5592" r="2.49056" fill="#C38DCE" />
        <Ellipse
            cx="50.5"
            cy="89.4046"
            rx="35"
            ry="2.5"
            fill="url(#paint2_radial_489_30024)"
            fillOpacity="0.3"
        />
        <Defs>
            <LinearGradient
                id="paint0_linear_489_30024"
                x1="82.5671"
                y1="71.1153"
                x2="69.8776"
                y2="88.5938"
                gradientUnits="userSpaceOnUse"
            >
                <Stop stopColor="#D6B0DD" stopOpacity="0.05" />
                <Stop offset="0.0001" stopColor="#D6B0DD" stopOpacity="0.05" />
                <Stop offset="0.295" stopColor="#D6B0DD" stopOpacity="0.4" />
                <Stop offset="0.5" stopColor="#D6B0DD" stopOpacity="0.7" />
                <Stop offset="0.735" stopColor="#D6B0DD" stopOpacity="0.4" />
                <Stop offset="1" stopColor="#D6B0DD" stopOpacity="0.05" />
            </LinearGradient>
            <LinearGradient
                id="paint1_linear_489_30024"
                x1="82.5671"
                y1="71.1153"
                x2="69.8776"
                y2="88.5938"
                gradientUnits="userSpaceOnUse"
            >
                <Stop stopColor="#D6B0DD" stopOpacity="0" />
                <Stop offset="0.505" stopColor="#D6B0DD" stopOpacity="0.5" />
                <Stop offset="1" stopColor="#D6B0DD" stopOpacity="0" />
                <Stop offset="1" stopColor="#A5CDE9" stopOpacity="0.05" />
            </LinearGradient>
            <RadialGradient
                id="paint2_radial_489_30024"
                cx="0"
                cy="0"
                r="1"
                gradientUnits="userSpaceOnUse"
                gradientTransform="translate(50.5 89.4046) rotate(90) scale(2.5 35)"
            >
                <Stop offset="0.35" stopColor="#C38DCE" />
                <Stop offset="1" stopColor="#C38DCE" stopOpacity="0" />
            </RadialGradient>
        </Defs>
    </Svg>
);

const SmeDarkEmptyPlaylists = () => (
    <Svg width="101" height="100" viewBox="0 0 101 100" fill="none">
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M29.6016 22.0032C29.6016 21.451 30.0493 21.0032 30.6016 21.0032H34.8817C36.218 21.0032 36.8873 22.6189 35.9423 23.5639L32.503 27.0032H35.6664C36.2186 27.0032 36.6664 27.451 36.6664 28.0032C36.6664 28.5555 36.2186 29.0032 35.6664 29.0032H31.2959C29.9595 29.0032 29.2903 27.3875 30.2352 26.4426L33.6746 23.0032H30.6016C30.0493 23.0032 29.6016 22.5555 29.6016 22.0032Z"
            fill="#F18638"
        />
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M10.9585 12.975C10.7053 12.2835 11.0605 11.5177 11.752 11.2644L18.2557 8.88241C19.9288 8.26962 21.5076 9.9856 20.7579 11.602L17.2354 19.1957L22.3598 17.3189C23.0513 17.0656 23.8171 17.4209 24.0704 18.1123C24.3236 18.8038 23.9684 19.5696 23.2769 19.8229L16.6412 22.2532C14.9681 22.866 13.3893 21.15 14.1391 19.5337L17.6615 11.9399L12.6691 13.7684C11.9776 14.0217 11.2118 13.6664 10.9585 12.975Z"
            fill="#F18638"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="#7CB5DE"
        />
        <Rect
            x="15.5"
            y="34.7132"
            width="70"
            height="49.6925"
            rx="3.2"
            fill="url(#paint0_linear_489_11435)"
        />
        <Circle cx="46.1237" cy="59.5009" r="19.9245" fill="#F2F8FC" />
        <Circle cx="75.8796" cy="44.2773" r="4.98112" fill="#A5CDE9" />
        <Path
            d="M75.2704 44.5569C74.919 44.5569 74.6341 44.8419 74.6341 45.1933V74.4437H74.025C73.6736 74.4437 73.3887 74.7286 73.3887 75.08V78.7884C73.3887 79.1399 73.6736 79.4248 74.025 79.4248H77.7334C78.0849 79.4248 78.3698 79.1399 78.3698 78.7884V75.08C78.3698 74.7286 78.0849 74.4437 77.7334 74.4437H77.1246V45.1933C77.1246 44.8419 76.8397 44.5569 76.4883 44.5569H75.2704Z"
            fill="#F2F8FC"
        />
        <Circle cx="46.1253" cy="59.5592" r="2.49056" fill="#7CB5DE" />
        <Ellipse
            cx="50.5"
            cy="89.4046"
            rx="35"
            ry="2.5"
            fill="url(#paint1_radial_489_11435)"
            fillOpacity="0.3"
        />
        <Defs>
            <LinearGradient
                id="paint0_linear_489_11435"
                x1="82.5671"
                y1="71.1153"
                x2="69.8776"
                y2="88.5938"
                gradientUnits="userSpaceOnUse"
            >
                <Stop stopColor="#A5CDE9" stopOpacity="0.05" />
                <Stop offset="0.295" stopColor="#A5CDE9" stopOpacity="0.4" />
                <Stop offset="0.505" stopColor="#A5CDE9" stopOpacity="0.7" />
                <Stop offset="0.735" stopColor="#A5CDE9" stopOpacity="0.4" />
                <Stop offset="1" stopColor="#A5CDE9" stopOpacity="0.05" />
            </LinearGradient>
            <RadialGradient
                id="paint1_radial_489_11435"
                cx="0"
                cy="0"
                r="1"
                gradientUnits="userSpaceOnUse"
                gradientTransform="translate(50.5 89.4046) rotate(90) scale(2.5 35)"
            >
                <Stop offset="0.35" stopColor="#7CB5DE" />
                <Stop offset="1" stopColor="#7CB5DE" stopOpacity="0" />
            </RadialGradient>
        </Defs>
    </Svg>
);

const EmptyPlaylists = () => (
    <ThemedComponent
        ORCHARD_DARK={() => <OrchardDarkEmptyPlaylists />}
        AWAL_DARK={() => <AwalDarkEmptyPlaylists />}
        SME_DARK={() => <SmeDarkEmptyPlaylists />}
    />
);

export default EmptyPlaylists;
