import { Box, FileUpload, AddItem } from '@wix/design-system';
import { ImportState } from '@wix/bex-core';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { st, classes } from './ImportStepUpload.st.css.js';

export interface ImportStepUploadProps {
  state: ImportState;
}

function _ImportStepUpload({ state }: ImportStepUploadProps) {
  const { translate: t } = state;

  return (
    <Box direction="vertical" gap="SP2">
      <Box height="280px">
        <FileUpload
          dataHook="import-file-input"
          className={st(classes.fileUpload)}
          accept=".csv,text/csv"
          onChange={(files) => {
            const file = files?.[0];
            if (file) {
              state.onFileSelected(file);
            }
          }}
        >
          {({ openFileUploadDialog }) => (
            <AddItem size="large" skin="filled" onClick={openFileUploadDialog}>
              {t('cairo.import.uploadButtonLabel')}
            </AddItem>
          )}
        </FileUpload>
      </Box>
    </Box>
  );
}

export const ImportStepUpload = observer(_ImportStepUpload);