import {
  Meta,
  Story,
  Preview,
  Props,
} from '@storybook/addon-docs/blocks';
import {
  Button,
  Container,
  Paper,
  Box,
  Grid,
  Typography,
  Dialog,
} from '@material-ui/core';
import Rest from 'q3-ui-test-utils/lib/rest';
import RichTextEditor from './RichTextEditor';
import { toQ3Api } from '../../adapters';

<Meta title="RichTextEditor" component={RichTextEditor} />

<Preview>
  <Story name="Default">
    <RichTextEditor />
  </Story>
  <Story name="Container">
    <Box my={4}>
      <Container>
        <Paper>
          <Rest
            define={(m) => {
              m.onPost(/uploads/).reply(
                async ({ data }) => {
                  const uploads = [];
                  for (var pair of data.entries()) {
                    if (pair[0].includes('mp4'))
                      uploads.push({
                        url: 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_30mb.mp4',
                      });
                    else if (pair[0].includes('mp3'))
                      uploads.push({
                        url: 'https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3',
                      });
                    else
                      uploads.push({
                        url: 'https://images.unsplash.com/photo-1638913975386-d61f0ec6500d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60',
                      });
                  }
                  return [
                    200,
                    {
                      uploads,
                    },
                  ];
                },
              );
            }}
            delay={1000}
          >
            <button>Focus first</button>
            <button>Focus before</button>
            <RichTextEditor upload={toQ3Api('/foo')} />
            <button>Focus after</button>
          </Rest>
        </Paper>
      </Container>
    </Box>
  </Story>
  <Story name="autosave">
    <Paper
      style={{
        height: '100vh',
        width: '100%',
        overflow: 'hidden',
      }}
    >
      <Dialog fullScreen open>
        <RichTextEditor id="testing" autofocus>
          <Container maxWidth="xl">
            <Grid container justify="space-between">
              <Grid item>
                <Typography variant="h6">
                  Document title
                </Typography>
              </Grid>
              <Grid item>
                <Button>Discard</Button>
                <Button variant="contained" color="primary">
                  Publish
                </Button>
              </Grid>
            </Grid>
          </Container>
        </RichTextEditor>
      </Dialog>
    </Paper>
  </Story>
  <Story name="Default value">
    <RichTextEditor defaultValue="<table><tbody><tr><td></td></tr></tbody></table><h2><strong>Hello world</strong></h2><img alt='TEST' style='width: 150px' src='https://images.unsplash.com/photo-1618799805265-4f27cb61ede9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80'/><p>This is a new sentence.</p>">
      <Button>Publish</Button>
    </RichTextEditor>
  </Story>
</Preview>