// @flow
import * as React from 'react';
import classNames from 'classnames';
import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue, bdlBoxBlue40 } from '../../styles/variables';

type Props = {
    className?: string,
    height?: number,
    primaryColor?: string,
    secondaryColor?: string,
    title?: string | React.Element<any>,
    width?: number,
};

const SandboxesEmptyState = ({
    className = '',
    primaryColor = bdlBoxBlue40,
    secondaryColor = bdlBoxBlue,
    height = 85,
    title,
    width = 130,
}: Props) => (
    <AccessibleSVG
        className={classNames('bdl-SandboxesEmptyState', className)}
        height={height}
        title={title}
        viewBox="0 0 130 85"
        width={width}
    >
        <path
            d="M77 6.634v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629A1.005 1.005 0 0 1 76.634 8h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-75.5 53.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644A.5.5 0 0 1 4 61c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644A.5.5 0 0 1 2 63a.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366H.49A.5.5 0 0 1 0 61c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm126 15v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-19-56.5v-.642a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644a.5.5 0 0 1 .49.5c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644a.5.5 0 0 1-.5.49.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644a.5.5 0 0 1-.49-.5c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-85-17.5V.492a.501.501 0 0 1 1-.002v.644c.152.088.278.214.366.366h.644A.5.5 0 0 1 26 2c0 .276-.215.5-.49.5h-.644a1.005 1.005 0 0 1-.366.366v.644A.5.5 0 0 1 24 4a.506.506 0 0 1-.5-.505v-.629a1.005 1.005 0 0 1-.366-.366h-.644A.5.5 0 0 1 22 2c0-.276.215-.5.49-.5h.644c.088-.152.214-.278.366-.366zm-5.563 8.075v-.402a.313.313 0 0 1 .625 0v.402a.628.628 0 0 1 .23.229h.401c.17 0 .307.144.307.312a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.229.228v.402a.313.313 0 0 1-.625.004v-.406a.628.628 0 0 1-.228-.229h-.402A.313.313 0 0 1 17 9.75c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .229-.228zm-11.5 65v-.402a.313.313 0 0 1 .625 0v.402a.628.628 0 0 1 .23.228h.401c.17 0 .307.145.307.313a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.229.228v.402a.313.313 0 0 1-.625.004v-.406a.628.628 0 0 1-.228-.228h-.402a.313.313 0 0 1-.307-.313c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .229-.228zm107 8.5v-.402a.313.313 0 0 1 .626 0v.402a.628.628 0 0 1 .228.228h.402c.17 0 .307.145.307.313a.308.308 0 0 1-.307.313h-.402a.628.628 0 0 1-.228.228v.402a.313.313 0 0 1-.626.004v-.406a.628.628 0 0 1-.228-.228h-.402a.313.313 0 0 1-.307-.313c0-.173.134-.313.307-.313h.402a.628.628 0 0 1 .228-.228z"
            fill={secondaryColor}
            fillRule="evenodd"
        />
        <path
            d="M38 41.838V54.81c.73 3.646 2.768 3.998 4.941 3.446a7.27 7.27 0 0 1 5.6-2.635 7.297 7.297 0 0 1 0 14.594 7.27 7.27 0 0 1-5.6-2.635c-2.173-.552-4.212-.2-4.941 3.446V84h42.162V71.027c.73-3.646 2.768-3.998 4.941-3.446a7.27 7.27 0 0 0 5.6 2.635 7.297 7.297 0 0 0 0-14.594 7.27 7.27 0 0 0-5.6 2.635c-2.173.552-4.212.2-4.94-3.446V41.838H67.188c-3.646-.73-3.999-2.768-3.446-4.941a7.27 7.27 0 0 0 2.635-5.6 7.297 7.297 0 0 0-14.594 0 7.27 7.27 0 0 0 2.635 5.6c.553 2.173.2 4.212-3.446 4.94H38z"
            fill="none"
            stroke={primaryColor}
            strokeWidth="2"
        />
    </AccessibleSVG>
);

export default SandboxesEmptyState;