import React, {
  useEffect,
  useMemo,
  useState,
} from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { orderBy } from 'lodash';

import { MultiColumnList } from '@folio/stripes/components';

import css from './TransformationsList.css';

const columnWidths = {
  fieldName: '50%',
  transformation: '50%',
};
const visibleColumns = ['fieldName', 'transformation'];

export const TransformationsList = ({
  transformations,
  allTransformations,
}) => {
  const [sortedTransformations, setSortedTransformations] = useState([]);
  const intl = useIntl();

  const formatter = useMemo(() => ({
    fieldName: record => {
      const transformation = allTransformations.find(({ fieldId }) => fieldId === record.fieldId);

      return transformation?.displayName;
    },
    transformation: record => (
      <pre
        title={record.transformation}
        className={css.transformation}
      >
        {record.transformation}
      </pre>
    ),
  }), [allTransformations]);

  const columnMapping = useMemo(() => ({
    fieldName: intl.formatMessage({ id: 'ui-data-export.mappingProfiles.transformations.fieldName' }),
    transformation: intl.formatMessage({ id: 'ui-data-export.mappingProfiles.transformations.transformation' }),
  }), [intl]);

  useEffect(() => {
    const formattedTransformations = orderBy(transformations.map(transformation => ({
      fieldName: formatter.fieldName(transformation),
      transformation: formatter.transformation(transformation),
    })), 'fieldName', 'asc');

    setSortedTransformations(formattedTransformations);
  }, [transformations, formatter]);

  return (
    <MultiColumnList
      id="mapping-profile-transformations-list"
      contentData={sortedTransformations}
      columnMapping={columnMapping}
      columnWidths={columnWidths}
      visibleColumns={visibleColumns}
      isEmptyMessage={intl.formatMessage({ id: 'ui-data-export.mappingProfiles.transformations.emptyMessage' })}
    />
  );
};

TransformationsList.propTypes = {
  transformations: PropTypes.arrayOf(PropTypes.object),
  allTransformations: PropTypes.arrayOf(PropTypes.object).isRequired,
};
TransformationsList.defaultProps = { transformations: [] };