import React, { useMemo, useContext } from 'react';
import { Table, Button, Popconfirm, Popover, message } from 'antd';
import { QrcodeOutlined, DeleteOutlined } from '@ant-design/icons';
import { CopyToClipboard } from 'react-copy-to-clipboard';

import { cdnQrcode, cdnUrl } from '../utils/helper';
import { Context } from '../context';

export default function File({
  loading,
  list,
  handleRemove,
}) {
  const { isAdmin, user } = useContext(Context);
  const columns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Date',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: createdAt => new Date(createdAt).toLocaleString(),
    },
    {
      title: '',
      key: 'op',
      width: 220,
      fixed: 'right',
      render: (text, record) => (
        <div>
          <Popover
            content={(
              <img
                alt="loading"
                style={{ width: 150, height: 150 }}
                src={cdnQrcode(record.key, 'file', isAdmin)}
              />
            )}>
            <Button style={{ marginLeft: 10 }}>
              <QrcodeOutlined />
            </Button>
          </Popover>
          {user && (
            <Popconfirm
              title="Are you sure to delete this ?"
              onConfirm={() => handleRemove(record.objectId)}
            >
              <Button style={{ marginLeft: 10 }} type="danger">
                <DeleteOutlined />
              </Button>
            </Popconfirm>
          )}
          <CopyToClipboard text={cdnUrl(record.key, 'file', isAdmin)}
            onCopy={() => message.success('Copied successfully')}>
            <Button style={{ marginLeft: 10 }} type="primary">Copy</Button>
          </CopyToClipboard>
        </div>
      ),
    },
  ], [handleRemove]);

  return (
    <Table
      loading={loading}
      dataSource={list}
      columns={columns}
      pagination={false}
    />
  );
}