import React from 'react';
import PropTypes from 'prop-types';
import { DownloadRounded, UploadRounded } from '@mui/icons-material';

import { Button, Stack } from '@/mui/components';

function ButtonsFileLoader({ allowedExtensions = ['.csv'], ...props }) {
  return (
    !!props.dictionary.url && (
      <Stack spacing={2} direction="row" alignItems="center">
        <Button
          color="primary"
          component="a"
          size="small"
          data-id={`button-download-${props.dictionaryName}`}
          href={props.dictionary.url}
          download
          square
          startIcon={<DownloadRounded />}
        />
        <Button
          data-id={`button-upload-${props.dictionaryName}`}
          startIcon={<UploadRounded />}
          square
          component="label"
          size="small"
        >
          <input
            type="file"
            hidden
            onChange={(event) => {
              const file = event.target.files?.[0];

              if (file) {
                props.uploadConfigFileAction({
                  allowedExtensions,
                  dictionary: props.dictionary,
                  dictionaryName: props.dictionaryName,
                  fileInfo: file,
                  multipleLabel: null,
                });
              }
            }}
            accept={allowedExtensions.join(',')}
          />
        </Button>
      </Stack>
    )
  );
}

ButtonsFileLoader.propTypes = {
  allowedExtensions: PropTypes.arrayOf(PropTypes.string),
  dictionary: PropTypes.shape({
    url: PropTypes.string,
    bucket: PropTypes.string,
    key: PropTypes.string,
  }).isRequired,
  dictionaryName: PropTypes.string.isRequired,
  uploadConfigFileAction: PropTypes.func.isRequired,
};

export default ButtonsFileLoader;
