text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { Link } from 'react-router-dom';
  import { compose } from 'ramda';
  import { createFragmentContainer } from 'react-relay';
  import Markdown from 'react-markdown';
  import graphql from 'babel-plugin-relay/macro';
  import { withStyles } from '@material-ui/core/styles';
  import Card from '@material-ui/core/Card';
  import CardActionArea from '@material-ui/core/CardActionArea';
  import CardHeader from '@material-ui/core/CardHeader';
  import CardContent from '@material-ui/core/CardContent';
  import Avatar from '@material-ui/core/Avatar';
  import IconButton from '@material-ui/core/IconButton';
  import { StarBorderOutlined } from '@material-ui/icons';
  import Skeleton from '@material-ui/lab/Skeleton';
  import inject18n from '../../../../components/i18n';
  import StixCoreObjectLabels from '../../common/stix_core_objects/StixCoreObjectLabels';
  import {
    addBookmark,
    deleteBookMark,
  } from '../../common/stix_domain_objects/StixDomainObjectBookmark';
  
  const styles = (theme) => ({
    card: {
      width: '100%',
      height: 170,
      borderRadius: 6,
    },
    cardDummy: {
      width: '100%',
      height: 170,
      color: theme.palette.grey[700],
      borderRadius: 6,
    },
    avatar: {
      backgroundColor: theme.palette.primary.main,
    },
    avatarDisabled: {
      backgroundColor: theme.palette.grey[600],
    },
    icon: {
      margin: '10px 20px 0 0',
      fontSize: 40,
      color: '#242d30',
    },
    area: {
      width: '100%',
      height: '100%',
    },
    header: {
      height: 55,
      paddingBottom: 0,
      marginBottom: 0,
    },
    content: {
      width: '100%',
      paddingTop: 0,
    },
    description: {
      height: 70,
      overflow: 'hidden',
    },
    objectLabel: {
      height: 45,
      paddingTop: 7,
    },
    contentDummy: {
      width: '100%',
      height: 120,
      overflow: 'hidden',
      marginTop: 15,
    },
    placeholderHeader: {
      display: 'inline-block',
      height: '.8em',
      backgroundColor: theme.palette.grey[700],
    },
    placeholderHeaderDark: {
      display: 'inline-block',
      height: '.8em',
      backgroundColor: theme.palette.grey[800],
    },
    placeholder: {
      display: 'inline-block',
      height: '1em',
      backgroundColor: theme.palette.grey[700],
    },
  });
  
  class MalwareCardComponent extends Component {
    render() {
      const {
        t, fsd, classes, node, bookmarksIds, onLabelClick,
      } = this.props;
      return (
        <Card classes={{ root: classes.card }} raised={true} elevation={3}>
          <CardActionArea
            classes={{ root: classes.area }}
            component={Link}
            to={`/dashboard/arsenal/malwares/${node.id}`}
          >
            <CardHeader
              classes={{ root: classes.header }}
              avatar={
                <Avatar className={classes.avatar}>{node.name.charAt(0)}</Avatar>
              }
              title={node.name}
              subheader={`${t('Updated the')} ${fsd(node.modified)}`}
              action={
                <IconButton
                  size="small"
                  onClick={
                    bookmarksIds.includes(node.id)
                      ? deleteBookMark.bind(this, node.id, 'Malware')
                      : addBookmark.bind(this, node.id, 'Malware')
                  }
                  color={bookmarksIds.includes(node.id) ? 'secondary' : 'primary'}
                  style={{ marginTop: 10 }}
                >
                  <StarBorderOutlined />
                </IconButton>
              }
            />
            <CardContent className={classes.content}>
              <div className={classes.description}>
                <Markdown
                  disallowedTypes={['link', 'linkReference']}
                  unwrapDisallowed={true}
                >
                  {node.description}
                </Markdown>
              </div>
              <div className={classes.objectLabel}>
                <StixCoreObjectLabels
                  labels={node.objectLabel}
                  onClick={onLabelClick.bind(this)}
                />
              </div>
            </CardContent>
          </CardActionArea>
        </Card>
      );
    }
  }
  
  MalwareCardComponent.propTypes = {
    node: PropTypes.object,
    classes: PropTypes.object,
    t: PropTypes.func,
    fsd: PropTypes.func,
    onLabelClick: PropTypes.func,
  };
  
  const MalwareCardFragment = createFragmentContainer(MalwareCardComponent, {
    node: graphql`
      fragment MalwareCard_node on Malware {
        id
        name
        description
        created
        modified
        objectMarking {
          edges {
            node {
              id
              definition
            }
          }
        }
        objectLabel {
          edges {
            node {
              id
              value
              color
            }
          }
        }
      }
    `,
  });
  
  export const MalwareCard = compose(
    inject18n,
    withStyles(styles),
  )(MalwareCardFragment);
  
  class MalwareCardDummyComponent extends Component {
    render() {
      const { classes } = this.props;
      return (
        <Card classes={{ root: classes.cardDummy }} raised={true} elevation={3}>
          <CardActionArea classes={{ root: classes.area }}>
            <CardHeader
              classes={{ root: classes.header }}
              avatar={
                <Skeleton
                  animation="wave"
                  variant="circle"
                  width={30}
                  height={30}
                />
              }
              title={
                <Skeleton
                  animation="wave"
                  variant="rect"
                  width="90%"
                  style={{ marginBottom: 10 }}
                />
              }
              titleTypographyProps={{ color: 'inherit' }}
              subheader={
                <Skeleton
                  animation="wave"
                  variant="rect"
                  width="90%"
                  style={{ marginBottom: 10 }}
                />
              }
              action={
                <Skeleton
                  animation="wave"
                  variant="circle"
                  width={30}
                  height={30}
                />
              }
            />
            <CardContent classes={{ root: classes.contentDummy }}>
              <Skeleton
                animation="wave"
                variant="rect"
                width="90%"
                style={{ marginBottom: 10 }}
              />
              <Skeleton
                animation="wave"
                variant="rect"
                width="95%"
                style={{ marginBottom: 10 }}
              />
              <Skeleton
                animation="wave"
                variant="rect"
                width="90%"
                style={{ marginBottom: 10 }}
              />
            </CardContent>
          </CardActionArea>
        </Card>
      );
    }
  }
  
  MalwareCardDummyComponent.propTypes = {
    classes: PropTypes.object,
  };
  
  export const MalwareCardDummy = compose(
    inject18n,
    withStyles(styles),
  )(MalwareCardDummyComponent);
  