import React, { useState } from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';
import { Modal, ModalProps } from '.';
import { Button } from '../Button';
import { Header } from './Header';
import { Body } from './Body';
import { Footer } from './Footer';
import { Box } from '../Box';
import { Flex } from '../Flex';
import { TransactionHash } from '../TransactionHash';
import { Text } from '../Text';
import { Heading } from '../Heading';
import { LoadingDots } from '../LoadingDots';
import { Icon } from '../Icon';
import * as icons from '../../assets/images/icons';
import { Paragraph } from '../Paragraph';
import { Grid } from '../Grid';
import { TooltipIcon } from '../TooltipIcon';
import { ButtonLarge } from '../ButtonLarge';
import { IconCircled } from '../IconCircled';
import { CopyableText } from '../CopyableText';
import { TextEllipsis } from '../TextEllipsis';
import { theme } from '../../styles/theme';

export default {
  title: 'Modal',
  component: Modal,
  argTypes: {
    onClose: { action: 'onClose' },
  },
} as Meta;

const QueueModalTemplate: Story<ModalProps> = (args) => (
  <Modal {...args}>
    <Body>
      <Flex flexDirection="row" mb="l">
        <Box>
          <LoadingDots />
        </Box>
        <Box ml="m">
          <Heading variant="h5">Transaction(s)</Heading>
        </Box>
      </Flex>
      <TransactionMock />
    </Body>
  </Modal>
);

const ConfirmationModalTemplate: Story<ModalProps> = (args) => (
  <Modal {...args}>
    <Body>
      <Box>
        <Heading variant="h5">Accept token ownership transfer</Heading>
      </Box>
      <Box>
        <Paragraph mt={20}>
          The security token ABC’s ownership has been transfered to you to own
          and manage. Review the details below and accept to complete the
          transfer.
        </Paragraph>
      </Box>

      <Grid gridTemplateColumns="1fr 11fr" mt="4">
        <Box>
          <IconCircled
            Asset={icons.SvgAccount}
            scale={0.75}
            width={48}
            height={48}
            color="primary"
          />
        </Box>
        <Flex flexDirection="column" alignItems="flex-start">
          <Heading variant="h5" color="brandMain">
            My identity
          </Heading>
          <CopyableText copyText={'0x123'}>
            <Text variant="b1">
              <TextEllipsis size={35}>0x123</TextEllipsis>
            </Text>
          </CopyableText>
        </Flex>
      </Grid>

      <Box mt="l">
        <Flex
          justifyContent="space-between"
          mb="m"
          pb="10px"
          borderBottom={`2px solid ${(theme as any).colors.gray[4]}`}
        >
          <Box>
            <Text variant="b1m" color="gray.2">
              From
            </Text>
          </Box>
          <Text variant="b1m" color="highlightText">
            0x123
          </Text>
        </Flex>
      </Box>
    </Body>
    <Footer>
      <Flex justifyContent={'space-between'}>
        <Flex flexDirection="column" alignItems="flex-start">
          <Flex
            flex={1}
            flexDirection="row"
            justifyContent="space-between"
            mt="1"
          >
            <Box>
              <Text variant="b3m" color="gray.2">
                Total cost
              </Text>
            </Box>
            <Box mb={1} ml="s">
              <TooltipIcon content="This will be withdrawn from your wallet balance." />
            </Box>
          </Flex>
          <Box>
            <Text variant="b2m" color="gray.1">
              0.00
            </Text>
            <Text variant="b2m" color="gray.2">
              {` POLYX`}
            </Text>
          </Box>
        </Flex>

        <Box>
          <ButtonLarge variant="secondary">Cancel</ButtonLarge>
          <ButtonLarge>Confirm</ButtonLarge>
        </Box>
      </Flex>
    </Footer>
  </Modal>
);

export const Default = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal
        isOpen={open}
        onClose={() => {
          setOpen(false);
          alert('onClose event fired'); // eslint-disable-line no-alert
        }}
      >
        <Header>Modal Header</Header>
        <Body>
          Modal Body...
          <br />
          Please note that you need to style the content of the modal. It just
          has basic styling.
        </Body>
        <Footer>Modal Footer(where buttons usually go)</Footer>
      </Modal>
    </>
  );
};

export const TransactionQueueModalInProgress = QueueModalTemplate.bind({});
TransactionQueueModalInProgress.args = {
  isOpen: true,
} as ModalProps;

export const ConfirmationModal = ConfirmationModalTemplate.bind({});
ConfirmationModal.args = {
  isOpen: true,
} as ModalProps;

function TransactionMock() {
  return (
    <Box mb="m">
      <Box mb="s">
        <Text variant="b2m" color="gray.2">
          Configuring token
        </Text>
      </Box>

      <TransactionHash
        hash={'0x1234567'}
        link={`https://google.com`}
        copyLink
        size={55}
        flexProps={{
          flexDirection: 'row',
          justifyContent: 'flex-start',
          mb: 'm',
        }}
      />

      <Box
        borderRadius="3"
        borderColor="gray.4"
        border="1px solid"
        borderWidth="1px"
        mb="4"
        p="m"
        width={456}
      >
        <Flex flexDirection={1}>
          <Box>
            <Icon
              Asset={icons.SvgClock}
              width={24}
              height={24}
              color="brandMain"
            />
          </Box>
          <Box mx="s">
            <Text variant="b2m" color="gray.2">
              Transaction in progress...
            </Text>
          </Box>
        </Flex>
      </Box>
    </Box>
  );
}
