import React from 'react';

import Button from '../Button';
import Icon from '../Icon';
import Drawer from '../Drawer';
import Typography from '../Typography';
import Tabs from '../Tabs';
import Sliders from '../Sliders';
import Divider from '../Divider';
import ColorSelect from '../ColorSelect';
import TextField from '../TextField';

import { BtnWrapper, ContentWrapper } from './styled';
import { Wrapper, Head, Body, Footer, IconWrapper } from '../../global/sidebarStyled';
import { Group, SliderWrapper } from '../../global/toolStyled';

type Props = {
  onClick: () => void;
  isActive: boolean;
};

const TextContent = () => {
  return (
    <>
      <ContentWrapper>
        <Typography variant="subtitle">Content</Typography>
      </ContentWrapper>
      <TextField variant="multiline" shouldFitContainer />
    </>
  );
}

const ImageContent = () => {
  return (
    <ContentWrapper>
      <Icon glyph="add-image" />
      <Button appearance="link" style={{marginLeft: '10px'}}>Select Image</Button>
    </ContentWrapper>
  );
}

const Watermark: React.FunctionComponent<Props> = ({
  onClick,
  isActive,
}) => {
  return (
    <>
      <BtnWrapper>
        <Button shouldFitContainer align="left" onClick={onClick}>
          <Icon glyph="watermark" style={{marginRight: '10px'}} />
          Watermark
        </Button>
      </BtnWrapper>
      <Drawer open={isActive} anchor="left">
        <Wrapper>
          <Head>
            <IconWrapper>
              <Icon glyph="left-back" onClick={onClick} />
            </IconWrapper>
            <Typography light>Watermark</Typography>
          </Head>
          <Body>
            <Typography variant="subtitle">Type</Typography>
            <Tabs
              options={[
                {
                  key: 'text',
                  content: 'Text',
                  child: <TextContent />,
                },
                {
                  key: 'image',
                  content: 'Image',
                  child: <ImageContent />,
                }
              ]}
            />
            <Divider orientation="horizontal" style={{ margin: '20px 0' }} />
            <ColorSelect />
            <Typography variant="subtitle">Opacity</Typography>
            <Group>
              <SliderWrapper>
                <Sliders />
              </SliderWrapper>
              40%
            </Group>
            <Divider orientation="horizontal" style={{ margin: '20px 0' }} />
            <Group>
              <Typography variant="subtitle">Page Range</Typography>
              <Button appearance="primary-hollow" style={{width: '50%'}}>All Pages</Button>
            </Group>
          </Body>
          <Footer>
            <Button appearance="primary">Save</Button>
            <Button appearance="danger-link">Remove watermark</Button>
          </Footer>
        </Wrapper>
      </Drawer>
    </>
  );
};

export default Watermark;
