/** @jsx jsx */
import { useState } from 'react';
import { jsx, Text, Flex, Avatar, Link as ThemeLink } from 'theme-ui';
import { Icon } from '@makerdao/dai-ui-icons';
import { toDateString } from '@utils/formatting';

const LineItem = ({ date, author, avatar, mobile }) => {
  return (
    <Flex sx={{ pt: 4, flexWrap: mobile ? 'wrap' : 'nowrap' }}>
      <Flex sx={{ alignItems: 'center' }}>
        <Text variant="caps" sx={{ fontSize: 2, visibility: 'hidden' }}>
          Last Edit:
        </Text>
        <Text sx={{ pl: 3 }}>{date}</Text>
      </Flex>
      <Flex sx={{ ml: [0, 4], alignItems: 'center' }}>
        <Text variant="caps" sx={{ fontSize: 2, visibility: 'hidden' }}>
          By:
        </Text>
        <ThemeLink href={`https://github.com/${author}`} target="_blank">
          <Flex sx={{ alignItems: 'center' }}>
            <Avatar sx={{ mx: 2, minWidth: 36, minHeight: 36 }} src={avatar} />
            <Icon sx={{ ml: 'auto' }} color="primary" name="increase"></Icon>
            <Text
              sx={{
                color: 'text',
                pl: 2,
                '&:hover': {
                  color: 'primaryEmphasis',
                },
              }}
            >
              {author}
            </Text>
          </Flex>
        </ThemeLink>
      </Flex>
    </Flex>
  );
};

const Contributors = ({ contributors = [], mobile }) => {
  const [open, setOpen] = useState(false);
  const [newest, ...rest] = contributors.sort((a, b) => new Date(b.date) - new Date(a.date));

  return (
    <Flex
      sx={{
        py: 3,
        px: 0,
        border: 'light',
        borderColor: 'muted',
        borderWidth: '1px 0 1px 0',
        flexDirection: mobile ? 'column' : 'row',
      }}
    >
      <Flex sx={{ flexDirection: 'column' }}>
        <Flex sx={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <Flex sx={{ pb: 0, flexWrap: mobile ? 'wrap' : 'nowrap' }}>
            <Flex sx={{ alignItems: 'center' }}>
              <Text variant="caps" sx={{ color: 'onBackgroundMuted', fontSize: 2 }}>
                Last Edit:
              </Text>
              <Text sx={{ pl: 3 }}>{toDateString(newest?.date)}</Text>
            </Flex>
            <Flex sx={{ ml: [0, 4], alignItems: 'center', cursor: 'pointer' }}>
              <Text variant="caps" sx={{ color: 'onBackgroundMuted', fontSize: 2 }}>
                By:
              </Text>
              <ThemeLink href={`https://github.com/${newest?.username}`} target="_blank">
                <Flex sx={{ alignItems: 'center' }}>
                  <Avatar
                    sx={{
                      mx: 2,
                      minWidth: 36,
                      minHeight: 36,
                    }}
                    src={newest?.avatar}
                  />
                  <Icon sx={{ ml: 'auto' }} color="primary" name="increase"></Icon>
                  <Text
                    sx={{
                      color: 'text',
                      pl: 2,
                      '&:hover': {
                        color: 'primaryEmphasis',
                      },
                    }}
                  >
                    {newest?.author}
                  </Text>
                </Flex>
              </ThemeLink>
            </Flex>
          </Flex>
        </Flex>
        {open &&
          rest?.map(({ date, username, avatar }) => (
            <LineItem
              key={username}
              date={toDateString(date)}
              author={username}
              avatar={avatar}
              mobile={mobile}
            />
          ))}
      </Flex>
      {rest.length > 0 && (
        <Flex
          sx={{
            justifyContent: 'space-between',
            ml: [0, 0, 'auto'],
            flexDirection: 'column',
            pt: [4, 4, 0],
          }}
        >
          <Flex
            sx={{
              justifyContent: mobile ? 'flex-start' : 'center',
              alignItems: 'center',
              pt: [0, 0, 1],
            }}
            onClick={() => setOpen(!open)}
          >
            <Icon
              sx={{
                ml: [0, 0, 'auto'],
              }}
              color="primary"
              name={open ? 'arrow_up_thin' : 'arrow_down_thin'}
            ></Icon>
            <Text
              sx={{
                pl: 2,
                cursor: 'pointer',
                '&:hover': {
                  color: 'primaryEmphasis',
                },
              }}
            >{`${open ? 'Hide' : 'Show'} All Contributors`}</Text>
          </Flex>
          {open && !mobile && (
            <Flex sx={{ flexDirection: 'column', alignItems: 'flex-end', pl: 5 }}>
              <Text sx={{ color: 'onBackgroundMuted' }}>Thanks to all contributors!</Text>
            </Flex>
          )}
        </Flex>
      )}
    </Flex>
  );
};

export default Contributors;