// @flow
import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue } from '../../styles/variables';

type Props = {
    className?: string,
    color?: string,
    height?: number,
    /** A text-only string describing the icon if it's not purely decorative for accessibility */
    title?: string | React.Element<any>,
    width?: number,
};

const SelectedItemsEmptyState = ({ className = '', color = bdlBoxBlue, height = 126, title, width = 130 }: Props) => (
    <AccessibleSVG
        className={`selected-items-empty-state ${className}`}
        height={height}
        title={title}
        viewBox="0 0 150 150"
        width={width}
    >
        <g fill="none" fillRule="evenodd" id="Export" stroke="none" strokeWidth="1">
            <g id="Empty_State_Filepicker_Selection_150x150">
                <path
                    className="fill-color"
                    d="M97,6.1337822 L97,5.49178758 C97,5.2201808 97.2319336,5 97.5,5 C97.7761424,5 98,5.21505737 98,5.49047852 L98,6.1337822 C98.151814,6.22160185 98.2783981,6.348186 98.3662178,6.5 L99.0095215,6.5 C99.2804053,6.5 99.5,6.73193359 99.5,7 C99.5,7.27614237 99.2849426,7.5 99.0095215,7.5 L98.3662178,7.5 C98.2783981,7.651814 98.151814,7.77839815 98,7.8662178 L98,8.50952148 C98,8.78040529 97.7680664,9 97.5,9 C97.2238576,9 97,8.76897915 97,8.49525623 L97,7.8662178 C96.848186,7.77839815 96.7216019,7.651814 96.6337822,7.5 L95.9904785,7.5 C95.7195947,7.5 95.5,7.26806641 95.5,7 C95.5,6.72385763 95.7150574,6.5 95.9904785,6.5 L96.6337822,6.5 C96.7216019,6.348186 96.848186,6.22160185 97,6.1337822 Z M6.5,89.6337822 L6.5,88.9917876 C6.5,88.7201808 6.73193359,88.5 7,88.5 C7.27614237,88.5 7.5,88.7150574 7.5,88.9904785 L7.5,89.6337822 C7.651814,89.7216019 7.77839815,89.848186 7.8662178,90 L8.50952148,90 C8.78040529,90 9,90.2319336 9,90.5 C9,90.7761424 8.78494263,91 8.50952148,91 L7.8662178,91 C7.77839815,91.151814 7.651814,91.2783981 7.5,91.3662178 L7.5,92.0095215 C7.5,92.2804053 7.26806641,92.5 7,92.5 C6.72385763,92.5 6.5,92.2689791 6.5,91.9952562 L6.5,91.3662178 C6.348186,91.2783981 6.22160185,91.151814 6.1337822,91 L5.49047852,91 C5.21959471,91 5,90.7680664 5,90.5 C5,90.2238576 5.21505737,90 5.49047852,90 L6.1337822,90 C6.22160185,89.848186 6.348186,89.7216019 6.5,89.6337822 Z M142.5,95.1337822 L142.5,94.4917876 C142.5,94.2201808 142.731934,94 143,94 C143.276142,94 143.5,94.2150574 143.5,94.4904785 L143.5,95.1337822 C143.651814,95.2216019 143.778398,95.348186 143.866218,95.5 L144.509521,95.5 C144.780405,95.5 145,95.7319336 145,96 C145,96.2761424 144.784943,96.5 144.509521,96.5 L143.866218,96.5 C143.778398,96.651814 143.651814,96.7783981 143.5,96.8662178 L143.5,97.5095215 C143.5,97.7804053 143.268066,98 143,98 C142.723858,98 142.5,97.7689791 142.5,97.4952562 L142.5,96.8662178 C142.348186,96.7783981 142.221602,96.651814 142.133782,96.5 L141.490479,96.5 C141.219595,96.5 141,96.2680664 141,96 C141,95.7238576 141.215057,95.5 141.490479,95.5 L142.133782,95.5 C142.221602,95.348186 142.348186,95.2216019 142.5,95.1337822 Z M113.5,17.1337822 L113.5,16.4917876 C113.5,16.2201808 113.731934,16 114,16 C114.276142,16 114.5,16.2150574 114.5,16.4904785 L114.5,17.1337822 C114.651814,17.2216019 114.778398,17.348186 114.866218,17.5 L115.509521,17.5 C115.780405,17.5 116,17.7319336 116,18 C116,18.2761424 115.784943,18.5 115.509521,18.5 L114.866218,18.5 C114.778398,18.651814 114.651814,18.7783981 114.5,18.8662178 L114.5,19.5095215 C114.5,19.7804053 114.268066,20 114,20 C113.723858,20 113.5,19.7689791 113.5,19.4952562 L113.5,18.8662178 C113.348186,18.7783981 113.221602,18.651814 113.133782,18.5 L112.490479,18.5 C112.219595,18.5 112,18.2680664 112,18 C112,17.7238576 112.215057,17.5 112.490479,17.5 L113.133782,17.5 C113.221602,17.348186 113.348186,17.2216019 113.5,17.1337822 Z M39.5,30.6337822 L39.5,29.9917876 C39.5,29.7201808 39.7319336,29.5 40,29.5 C40.2761424,29.5 40.5,29.7150574 40.5,29.9904785 L40.5,30.6337822 C40.651814,30.7216019 40.7783981,30.848186 40.8662178,31 L41.5095215,31 C41.7804053,31 42,31.2319336 42,31.5 C42,31.7761424 41.7849426,32 41.5095215,32 L40.8662178,32 C40.7783981,32.151814 40.651814,32.2783981 40.5,32.3662178 L40.5,33.0095215 C40.5,33.2804053 40.2680664,33.5 40,33.5 C39.7238576,33.5 39.5,33.2689791 39.5,32.9952562 L39.5,32.3662178 C39.348186,32.2783981 39.2216019,32.151814 39.1337822,32 L38.4904785,32 C38.2195947,32 38,31.7680664 38,31.5 C38,31.2238576 38.2150574,31 38.4904785,31 L39.1337822,31 C39.2216019,30.848186 39.348186,30.7216019 39.5,30.6337822 Z M42.5,142.133782 L42.5,141.491788 C42.5,141.220181 42.7319336,141 43,141 C43.2761424,141 43.5,141.215057 43.5,141.490479 L43.5,142.133782 C43.651814,142.221602 43.7783981,142.348186 43.8662178,142.5 L44.5095215,142.5 C44.7804053,142.5 45,142.731934 45,143 C45,143.276142 44.7849426,143.5 44.5095215,143.5 L43.8662178,143.5 C43.7783981,143.651814 43.651814,143.778398 43.5,143.866218 L43.5,144.509521 C43.5,144.780405 43.2680664,145 43,145 C42.7238576,145 42.5,144.768979 42.5,144.495256 L42.5,143.866218 C42.348186,143.778398 42.2216019,143.651814 42.1337822,143.5 L41.4904785,143.5 C41.2195947,143.5 41,143.268066 41,143 C41,142.723858 41.2150574,142.5 41.4904785,142.5 L42.1337822,142.5 C42.2216019,142.348186 42.348186,142.221602 42.5,142.133782 Z M63.4375,128.208614 L63.4375,127.807367 C63.4375,127.637613 63.5824585,127.5 63.75,127.5 C63.922589,127.5 64.0625,127.634411 64.0625,127.806549 L64.0625,128.208614 C64.1573838,128.263501 64.2364988,128.342616 64.2913861,128.4375 L64.6934509,128.4375 C64.8627533,128.4375 65,128.582458 65,128.75 C65,128.922589 64.8655891,129.0625 64.6934509,129.0625 L64.2913861,129.0625 C64.2364988,129.157384 64.1573838,129.236499 64.0625,129.291386 L64.0625,129.693451 C64.0625,129.862753 63.9175415,130 63.75,130 C63.577411,130 63.4375,129.855612 63.4375,129.697443 L63.4375,129.291386 C63.3426162,129.236499 63.2635012,129.157384 63.2086139,129.0625 L62.8065491,129.0625 C62.6372467,129.0625 62.5,128.917542 62.5,128.75 C62.5,128.577411 62.6344109,128.4375 62.8065491,128.4375 L63.2086139,128.4375 C63.2635012,128.342616 63.3426162,128.263501 63.4375,128.208614 Z M132.5,122.633782 L132.5,121.991788 C132.5,121.720181 132.731934,121.5 133,121.5 C133.276142,121.5 133.5,121.715057 133.5,121.990479 L133.5,122.633782 C133.651814,122.721602 133.778398,122.848186 133.866218,123 L134.509521,123 C134.780405,123 135,123.231934 135,123.5 C135,123.776142 134.784943,124 134.509521,124 L133.866218,124 C133.778398,124.151814 133.651814,124.278398 133.5,124.366218 L133.5,125.009521 C133.5,125.280405 133.268066,125.5 133,125.5 C132.723858,125.5 132.5,125.268979 132.5,124.995256 L132.5,124.366218 C132.348186,124.278398 132.221602,124.151814 132.133782,124 L131.490479,124 C131.219595,124 131,123.768066 131,123.5 C131,123.223858 131.215057,123 131.490479,123 L132.133782,123 C132.221602,122.848186 132.348186,122.721602 132.5,122.633782 Z M33.9375,38.7086139 L33.9375,38.3073672 C33.9375,38.137613 34.0824585,38 34.25,38 C34.422589,38 34.5625,38.1344109 34.5625,38.3065491 L34.5625,38.7086139 C34.6573838,38.7635012 34.7364988,38.8426162 34.7913861,38.9375 L35.1934509,38.9375 C35.3627533,38.9375 35.5,39.0824585 35.5,39.25 C35.5,39.422589 35.3655891,39.5625 35.1934509,39.5625 L34.7913861,39.5625 C34.7364988,39.6573838 34.6573838,39.7364988 34.5625,39.7913861 L34.5625,40.1934509 C34.5625,40.3627533 34.4175415,40.5 34.25,40.5 C34.077411,40.5 33.9375,40.355612 33.9375,40.1974433 L33.9375,39.7913861 C33.8426162,39.7364988 33.7635012,39.6573838 33.7086139,39.5625 L33.3065491,39.5625 C33.1372467,39.5625 33,39.4175415 33,39.25 C33,39.077411 33.1344109,38.9375 33.3065491,38.9375 L33.7086139,38.9375 C33.7635012,38.8426162 33.8426162,38.7635012 33.9375,38.7086139 Z M16.4375,107.708614 L16.4375,107.307367 C16.4375,107.137613 16.5824585,107 16.75,107 C16.922589,107 17.0625,107.134411 17.0625,107.306549 L17.0625,107.708614 C17.1573838,107.763501 17.2364988,107.842616 17.2913861,107.9375 L17.6934509,107.9375 C17.8627533,107.9375 18,108.082458 18,108.25 C18,108.422589 17.8655891,108.5625 17.6934509,108.5625 L17.2913861,108.5625 C17.2364988,108.657384 17.1573838,108.736499 17.0625,108.791386 L17.0625,109.193451 C17.0625,109.362753 16.9175415,109.5 16.75,109.5 C16.577411,109.5 16.4375,109.355612 16.4375,109.197443 L16.4375,108.791386 C16.3426162,108.736499 16.2635012,108.657384 16.2086139,108.5625 L15.8065491,108.5625 C15.6372467,108.5625 15.5,108.417542 15.5,108.25 C15.5,108.077411 15.6344109,107.9375 15.8065491,107.9375 L16.2086139,107.9375 C16.2635012,107.842616 16.3426162,107.763501 16.4375,107.708614 Z M123.4375,118.208614 L123.4375,117.807367 C123.4375,117.637613 123.582458,117.5 123.75,117.5 C123.922589,117.5 124.0625,117.634411 124.0625,117.806549 L124.0625,118.208614 C124.157384,118.263501 124.236499,118.342616 124.291386,118.4375 L124.693451,118.4375 C124.862753,118.4375 125,118.582458 125,118.75 C125,118.922589 124.865589,119.0625 124.693451,119.0625 L124.291386,119.0625 C124.236499,119.157384 124.157384,119.236499 124.0625,119.291386 L124.0625,119.693451 C124.0625,119.862753 123.917542,120 123.75,120 C123.577411,120 123.4375,119.855612 123.4375,119.697443 L123.4375,119.291386 C123.342616,119.236499 123.263501,119.157384 123.208614,119.0625 L122.806549,119.0625 C122.637247,119.0625 122.5,118.917542 122.5,118.75 C122.5,118.577411 122.634411,118.4375 122.806549,118.4375 L123.208614,118.4375 C123.263501,118.342616 123.342616,118.263501 123.4375,118.208614 Z"
                    fill={color}
                />
                <path
                    className="fill-color"
                    d="M43.4804692,103.174876 L41.1752714,101.240586 C40.7617585,100.893607 40.1285056,100.946696 39.7735038,101.369771 C39.416027,101.795795 39.4705231,102.420947 39.8896962,102.772675 L42.9680029,105.355681 C43.1743888,105.528859 43.4355129,105.602379 43.6894604,105.57998 C43.9483712,105.55797 44.1918657,105.438515 44.3678615,105.228771 L48.2284051,100.627954 C48.5780776,100.211231 48.526314,99.5763992 48.1032393,99.2213974 C47.6772151,98.8639206 47.0502638,98.920561 46.6963163,99.3423792 L43.4804692,103.174876 Z M37,102 C37,98.1340068 40.1350851,95 44.0024366,95 L94.9975634,95 C98.8649024,95 102,98.1418733 102,102 C102,105.865993 98.8649149,109 94.9975634,109 L44.0024366,109 C40.1350976,109 37,105.858127 37,102 Z"
                    fill={color}
                />
                <rect
                    className="stroke-color fill-white"
                    fill="#FFFFFF"
                    height="60"
                    rx="1.5"
                    stroke={color}
                    strokeWidth="2"
                    width="40"
                    x="62"
                    y="53"
                />
                <path
                    className="fill-color"
                    d="M33.4804692,85.1748765 L31.1752714,83.2405859 C30.7617585,82.8936073 30.1285056,82.9466958 29.7735038,83.3697705 C29.416027,83.7957948 29.4705231,84.4209468 29.8896962,84.7726747 L32.9680029,87.3556808 C33.1743888,87.5288591 33.4355129,87.6023789 33.6894604,87.57998 C33.9483712,87.5579702 34.1918657,87.4385148 34.3678615,87.2287712 L38.2284051,82.6279545 C38.5780776,82.211231 38.526314,81.5763992 38.1032393,81.2213974 C37.6772151,80.8639206 37.0502638,80.920561 36.6963163,81.3423792 L33.4804692,85.1748765 Z M27,84 C27,80.1340068 30.1350851,77 34.0024366,77 L84.9975634,77 C88.8649024,77 92,80.1418733 92,84 C92,87.8659932 88.8649149,91 84.9975634,91 L34.0024366,91 C30.1350976,91 27,87.8581267 27,84 Z"
                    fill={color}
                />
                <rect
                    className="stroke-color fill-white"
                    fill="#FFFFFF"
                    height="60"
                    rx="1.5"
                    stroke={color}
                    strokeWidth="2"
                    width="40"
                    x="70"
                    y="37"
                />
                <path
                    className="stroke-color fill-white"
                    d="M79,46.4981237 C79,45.6707328 79.6757415,45 80.4989041,45 L112.911044,45 C113.738866,45 114.834395,45.5280187 115.346944,46.1656381 L123.063004,55.7645454 C123.580493,56.4083096 124,57.6097136 124,58.4215292 L124,103.508654 C124,104.332302 123.328952,105 122.502769,105 L80.4972305,105 C79.6703329,105 79,104.326172 79,103.501876 L79,46.4981237 Z"
                    fill="#FFFFFF"
                    stroke={color}
                    strokeWidth="2"
                />
                <path
                    className="fill-color"
                    d="M86.5,70 C86.5,69.4477153 86.9473652,69 87.4981537,69 L115.501846,69 C116.053111,69 116.5,69.4438648 116.5,70 C116.5,70.5522847 116.052635,71 115.501846,71 L87.4981537,71 C86.9468886,71 86.5,70.5561352 86.5,70 Z M86.5,75 C86.5,74.4477153 86.9473652,74 87.4981537,74 L115.501846,74 C116.053111,74 116.5,74.4438648 116.5,75 C116.5,75.5522847 116.052635,76 115.501846,76 L87.4981537,76 C86.9468886,76 86.5,75.5561352 86.5,75 Z M86.5,80 C86.5,79.4477153 86.9449463,79 87.4933977,79 L103.506602,79 C104.055241,79 104.5,79.4438648 104.5,80 C104.5,80.5522847 104.055054,81 103.506602,81 L87.4933977,81 C86.9447593,81 86.5,80.5561352 86.5,80 Z M106.9,80 C106.9,79.4477153 107.350975,79 107.890778,79 L111.909222,79 C112.456414,79 112.9,79.4438648 112.9,80 C112.9,80.5522847 112.449025,81 111.909222,81 L107.890778,81 C107.343586,81 106.9,80.5561352 106.9,80 Z"
                    fill={color}
                />
                <path
                    className="fill-color fill-opacity"
                    d="M81,93.0952639 C81,92.2673619 81.6405192,91.819868 82.4446313,92.0247586 C82.4446313,92.0247586 83.7455648,92.9506249 94.6666667,92.9506249 C101.455564,92.9506249 104.465846,95.7883014 108.333333,95.7883014 C116.155282,95.7883014 120.733786,92.3847142 120.733786,92.3847142 C121.433097,91.949238 122,92.2738296 122,93.0952639 L122,101.474211 C122,102.302113 121.322576,102.973261 120.492164,102.973261 L82.5078364,102.973261 C81.6750814,102.973261 81,102.295646 81,101.474211 L81,93.0952639 Z"
                    fill={color}
                    fillOpacity="0.1"
                />
                <path
                    className="stroke-color"
                    d="M123,56 L114.615019,56 C113.723068,56 113,55.2734286 113,54.3849814 L113,46"
                    stroke={color}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                />
                <path
                    className="stroke-color"
                    d="M51.4997804,57 C51.5159706,57 58.357785,57.0000513 62,57.0001537 M62,71 L50.5002196,71 C46.3579627,71 42.8594173,70.1626263 42.8594173,66.0195799"
                    stroke={color}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                />
                <path
                    className="stroke-color"
                    d="M42.860937,66.126647 C42.860937,63.7364857 44.5317428,61.2152184 47.5857812,61 L81.4999054,61 C83.4329543,61 85,61.5709366 85,63.5 C85,65.4329966 83.4293087,66 81.4999054,66 L51.887125,66"
                    stroke={color}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                />
            </g>
        </g>
    </AccessibleSVG>
);

export default SelectedItemsEmptyState;