import React from 'react';
import forOwn from 'lodash/forOwn';
import cloneDeep from 'lodash/cloneDeep';
import { uuid } from 'utils/common';
import StyledWrapper from './StyledWrapper';

const VariablesTable = ({ variables, collectionVariables }) => {
  const collectionVars = [];

  forOwn(cloneDeep(collectionVariables), (value, key) => {
    collectionVars.push({
      uid: uuid(),
      name: key,
      value: value
    });
  });

  return (
    <StyledWrapper>
      <div className="flex flex-col w-full">
        <div className='mb-2 font-medium'>Environment Variables</div>
        {(variables && variables.length) ? variables.map((variable) => {
          return (
            <div key={variable.uid} className="flex">
              <div className='variable-name text-yellow-600 text-right pr-2'>{variable.name}</div>
              <div className='variable-value pl-2 whitespace-normal text-left flex-grow'>{variable.value}</div>
            </div>
          );
        }) : <small>No env variables found</small>}

        <div className='mt-2 font-medium'>Collection Variables</div>
        {(collectionVars && collectionVars.length) ? collectionVars.map((variable) => {
          return (
            <div key={variable.uid} className="flex">
              <div className='variable-name text-yellow-600 text-right pr-2'>{variable.name}</div>
              <div className='variable-value pl-2 whitespace-normal text-left flex-grow'>{variable.value}</div>
            </div>
          );
        }) : <small>No collection variables found</small>}
      </div>
    </StyledWrapper>
  );
};

export default VariablesTable;