import { Fragment } from 'react';
import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
import type { PConnFieldProps } from './PConnProps';
import './create-nonce';

// includes in bundle
import Operator from './Operator';

import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';


// interface for props
interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
  // If any, enter additional props that only exist on TextInput here
  title: string;
  createLabel: string;
  updateLabel: string;
}

// Created for Launchpad

// props passed in combination of props from property panel (config.json) and run time props from Constellation
// any default values in config.pros should be set in defaultProps at bottom of this file
function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {

  const {
    getPConnect,
    title = 'Create operator',
    label = 'Create operator',
    createLabel,
    updateLabel
  } = props;


  const { createTime, createdBy, lastUpdateTime, lastUpdatedBy } = getPConnect().getCaseSummary();

  const [_label, user, dateTimeValue] =
    label === 'Create operator'
      ? [createLabel, createdBy, createTime]
      : [updateLabel, lastUpdatedBy, lastUpdateTime];



  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <Card>
      <CardHeader>{title}</CardHeader>
      <CardContent>
{{! pick new delimiters for mustache }} {{=<% %>=}}
      <Flex container={{ direction: 'row'}}>
           <Operator
              label={_label}
              name={user}
              id={user}
              getPConnect={getPConnect}
              value={undefined}
              validatemessage=''
              hideLabel={false}
              readOnly={false}
              required={false}
              disabled={false}
              externalUser={undefined}
              testId=''
              helperText=''
              metaObj={undefined}
            /><%={{ }}=%>     {{! revert delimiters for mustache }}
      {dateTimeValue && (
        <Fragment>
          {' '}
          <DateTimeDisplay value={dateTimeValue} variant='relative' />
        </Fragment>
      )}
      </Flex>
      </CardContent>
      </Card>

    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );



}


export default withConfiguration({{COMPONENT_CLASS_NAME}});

// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
// same key value pairs in obj. hence using custom comparison function on when to re-render
// const comparisonFn = (prevProps, nextProps) => {
//   return prevProps.updateDateTime === nextProps.updateDateTime;
// };