import * as React from 'react';
import uniqueId from 'lodash/uniqueId';

import AccessibleSVG from '../accessible-svg';
import { TwoTonedIcon } from '../iconTypes';

const ICON_CLASS = 'left-nav-ghost-state';

class LeftNavPlaceholder extends React.PureComponent<TwoTonedIcon> {
    static defaultProps = {
        className: '',
        height: 300,
        width: 150,
    };

    idPrefix = `${uniqueId(ICON_CLASS)}-`;

    render() {
        const { className, height, title, width } = this.props;
        return (
            <AccessibleSVG
                className={`${ICON_CLASS} ${className}`}
                height={height}
                title={title}
                viewBox="0 0 150 300"
                width={width}
            >
                <path
                    d="M1.282 260h97.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0-260h77.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V1.282C0 .836.046.674.134.512A.909.909 0 0 1 .512.134C.675.046.836 0 1.282 0zm0 30h117.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V31.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h67.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V61.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h97.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V91.282c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 40h77.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h117.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h67.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zm0 30h97.436c.446 0 .608.046.77.134a.909.909 0 0 1 .378.378c.088.163.134.324.134.77v11.436c0 .446-.046.608-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H1.282c-.446 0-.608-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77v-11.436c0-.446.046-.608.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134z"
                    fill="#DDE6ED"
                    fillRule="evenodd"
                    opacity=".6"
                />
            </AccessibleSVG>
        );
    }
}

export default LeftNavPlaceholder;
