import {
  Card,
  CardContent,
  CardHeader,
  Typography,
  CardActions,
  Button
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
  // If any, enter additional props that only exist on this component
  header?: string;
  description?: string;
  datasource?: any;
  whatsnewlink?: string;
}

const useStyles = makeStyles(myTheme => ({
  root: {
    marginTop: myTheme.spacing(1),
    marginBottom: myTheme.spacing(1),
    borderLeft: '6px solid',
    borderLeftColor: myTheme.palette.primary.light
  }
}));

// Page Widget example is the "App Announcment"

// props passed in combination of props from property panel (config.json) and run time props from Constellation
export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
  let details = [];
  if (datasource && datasource.source) {
    details = datasource.source.map(item => {
      return item.name;
    });
  }

  const classes = useStyles();

  const handleClick = () => {
    window.open(whatsnewlink);
  };

  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <Card title='AppAnnouncement' className={classes.root}>
        <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
        <CardContent>
          <Typography variant='body1' gutterBottom>
            {description}
          </Typography>
          {details.map((itm, idx) => {
            const theKey = `AppAnn-item-${idx}`;
            return (
              <Typography key={theKey} variant='body2'>
                - {itm}
              </Typography>
            );
          })}
        </CardContent>
        <CardActions>
          <Button color='primary' onClick={handleClick} size='small'>
            See what&apos;s new
          </Button>
        </CardActions>
      </Card>
    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );
}