import React, { useState } from 'react';
import { Card, Collapse, Typography } from '@material-tailwind/react';

import EditEnvironmentVariableRow from './EditEnvironmentVariableRow';
import { Environment, EnvironmentVariable } from 'gql-client';

interface DisplayEnvironmentVariablesProps {
  environment: Environment;
  variables: EnvironmentVariable[];
  onUpdate: () => Promise<void>;
}

const DisplayEnvironmentVariables = ({
  environment,
  variables,
  onUpdate,
}: DisplayEnvironmentVariablesProps) => {
  const [openCollapse, setOpenCollapse] = useState(false);

  return (
    <>
      <div
        className="flex gap-4 p-2 "
        onClick={() => setOpenCollapse((cur) => !cur)}
      >
        <div>^</div>
        <div className="grow capitalize">{environment}</div>
        <div>{variables.length} variables</div>
      </div>
      <Collapse open={openCollapse}>
        {variables.length === 0 ? (
          <Card className="bg-gray-300 flex items-center p-4" placeholder={''}>
            <Typography variant="small" className="text-black" placeholder={''}>
              No environment variables added yet.
            </Typography>
            <Typography variant="small" placeholder={''}>
              Once you add them, they’ll show up here.
            </Typography>
          </Card>
        ) : (
          variables.map((variable: EnvironmentVariable) => {
            return (
              <EditEnvironmentVariableRow
                onUpdate={onUpdate}
                key={variable.id}
                variable={variable}
              />
            );
          })
        )}
      </Collapse>
    </>
  );
};

export default DisplayEnvironmentVariables;