import React, { useContext } from 'react';
import ContributorsList from '@qixian.cs/github-contributors-list';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import { useIntl } from 'dumi';

import SiteContext from '../SiteContext';
import ContributorAvatar from './ContributorAvatar';

const useStyle = createStyles(({ token, css }) => ({
  contributorsList: css`
    margin-top: 120px !important;
  `,
  listMobile: css`
    margin: 1em 0 !important;
  `,
  title: css`
    font-size: 12px;
    opacity: 0.5;
    margin-bottom: 8px;
  `,
  list: css`
    display: flex;
    flex-wrap: wrap;
    clear: both;
    li {
      height: 24px;
      transition: all ${token.motionDurationSlow};
      margin-inline-end: -8px;
    }
    &:hover {
      li {
        margin-inline-end: 0;
      }
    }
  `,
}));

interface ContributorsProps {
  filename?: string;
}

const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
  const { formatMessage } = useIntl();
  const { styles } = useStyle();
  const { isMobile } = useContext(SiteContext);

  if (!filename) {
    return null;
  }

  return (
    <div className={classNames(styles.contributorsList, { [styles.listMobile]: isMobile })}>
      <div className={styles.title}>{formatMessage({ id: 'app.content.contributors' })}</div>
      <ContributorsList
        cache
        repo="ant-design"
        owner="ant-design"
        fileName={filename}
        className={styles.list}
        renderItem={(item, loading) => (
          <ContributorAvatar item={item} loading={loading} key={item?.url} />
        )}
      />
    </div>
  );
};

export default Contributors;