import { List, ListItem, ListItemText } from '@material-ui/core';
import { MoreVert } from '@material-ui/icons';
import * as Colors from '@brightlayer-ui/colors';
import { Moisture as Humidity, Temp } from '@brightlayer-ui/icons-mui';
import { Hero, HeroBanner, ScoreCard } from '@brightlayer-ui/react-components';
import { action } from '@storybook/addon-actions';
import { number } from '@storybook/addon-knobs';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import React from 'react';
import { actionRow } from './with-actions';

const backgroundImage = require('../../assets/topology_40.png');

export const heroes: JSX.Element[] = [
    <Hero
        key={'hero1'}
        icon={<Temp fontSize={'inherit'} htmlColor={Colors.black[500]} />}
        label={'Temperature'}
        iconSize={48}
        iconBackgroundColor={Colors.white[50]}
        value={98}
        units={'°F'}
        fontSize={'normal'}
    />,
    <Hero
        key={'hero2'}
        icon={<Humidity fontSize={'inherit'} htmlColor={Colors.blue[300]} />}
        label={'Humidity'}
        value={54}
        iconBackgroundColor={Colors.white[50]}
        units={'%'}
        iconSize={48}
        fontSize={'normal'}
    />,
];

export const withHeroes = (): StoryFnReactReturnType => (
    <ScoreCard
        style={{ width: 400, flex: '0 0 auto' }}
        headerTitle={'Substation 3'}
        headerSubtitle={'High Humidity Alarm'}
        headerInfo={'4 Devices'}
        headerColor={Colors.blue[500]}
        headerFontColor={Colors.white[50]}
        headerBackgroundImage={backgroundImage}
        actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}
        actionRow={actionRow}
        badge={
            <HeroBanner>
                {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}
            </HeroBanner>
        }
        badgeOffset={0}
    >
        <List>
            <ListItem>
                <ListItemText primary={'Body Content'} />
            </ListItem>
        </List>
    </ScoreCard>
);

withHeroes.story = { name: 'with heroes' };