import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import { makeStyles, Button, Typography } from '@material-ui/core';

import {
  BenzinThemeProvider,
  Header,
  Window,
  ContentSection,
  SmartList,
} from './lib';

import icon from './assets/icon.svg';

interface RenderPropTypes {
  index: number;
  style: React.CSSProperties;
}


const useStyles = makeStyles(theme => ({
  window: {
    padding: theme.spacing(4),
  }
}));


const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>

const headerContents = {
  home: null,
  page: null,
  'another page': null,
};

const renderItem: React.FC<RenderPropTypes> = ({ index, style}) => {
  return (
      <Typography variant="h3" style={style} component="div"> {index} </Typography>
  );
};

const App: React.FC = () => {
  const classes = useStyles();
  const [page, setPage] = useState('home');

  return (
    <BenzinThemeProvider>
      <Header
        logo={{
          icon: Icon,
          title: 'BENZIN',
        }}
        contents={headerContents}
        page={page}
        setPage={setPage}
      />
      <Window type="primary">
        <div className={classes.window}>
          <ContentSection sectionName="Library preview">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <Button variant="contained" color="secondary">
              secondary
            </Button>
            <Button variant="contained" color="primary">
              primary
            </Button>
          </ContentSection>
        </div>
      </Window>
      <Window type="secondary" name="SmartList test window">
        <SmartList
          itemSize={270}
          itemCount={100}
          renderItem={renderItem}
        />
      </Window>
    </BenzinThemeProvider>
  );
};


ReactDOM.render(<App />, document.getElementById('root'));