import {
  Checkbox as CosmosCheckbox,
  CheckboxGroup,
  FieldValueList,
  Text,
  withConfiguration,
  BooleanDisplay
} from "@pega/cosmos-react-core";

import type { PConnFieldProps } from './PConnProps';
import './create-nonce';

// includes in bundle
import handleEvent from "./event-utils";
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
  displayAsStatus?: boolean;
  isTableFormatter?: boolean;
  hasSuggestions?: boolean;
  variant?: any;
  formatter: string;
  caption: string;
  trueLabel: string;
  falseLabel: string;
}

// interface for StateProps object
interface StateProps {
  value: string;
  hasSuggestions: boolean;
}

interface ActionsProps {
  onClick: any;
}

// Duplicated runtime code from Constellation Design System Component

// 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,
    value = false,
    label = '',
    helperText = '',
    caption,
    validatemessage,
    hideLabel,
    testId,
    additionalProps = {},
    displayMode,
    variant = 'inline',
    trueLabel,
    falseLabel
  } = props;
  const pConn = getPConnect();
  const actions = pConn.getActionsApi();
  const actionsProps = pConn.getActionsApi() as unknown as ActionsProps;
  const stateProps = pConn.getStateProps() as StateProps;
  const propName: string = stateProps.value;

  let { readOnly = false, required = false, disabled = false } = props;
  [readOnly, required, disabled] = [readOnly, required, disabled].map(
    (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
  );

  let status: "error" | "success" | "warning" | "pending" | undefined;
  if (validatemessage !== "") {
    status = "error";
  }

  const aCosmosCheckbox = (
    <CosmosCheckbox
      {...additionalProps}
      className="standard"
      checked={value}
      label={caption}
      disabled={disabled}
      readOnly={readOnly}
      required={required}
      onClick={actionsProps.onClick}
      onChange={(event) => {
        handleEvent(actions, "changeNblur", propName, event.target.checked);
      }}
      onBlur={(event: { target: { checked: any; }; }) => {
        pConn.getValidationApi().validate(event.target.checked);
      }}
      data-testid={testId}
    />
  );

  const parentTestId = testId === '' ? `${testId}-parent` : testId;

  let displayComponent;
  if (displayMode) {
    displayComponent = (
      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
    );
  }

  if (displayMode === 'DISPLAY_ONLY') {
    return (
      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {displayComponent}
      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
    );
  }

  if (displayMode === "LABELS_LEFT") {
    return (
      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <FieldValueList
        variant={hideLabel ? 'stacked' : variant}
        data-testid={testId}
        fields={[{ id: '1', name: hideLabel ? '' : caption, value: displayComponent }]}
      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
    );
  }

  if (displayMode === "STACKED_LARGE_VAL") {
    return (
      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <FieldValueList
        variant='stacked'
        data-testid={testId}
        fields={[
          {
            id: '2',
            name: hideLabel ? '' : caption,
            value: (
              <Text variant='h1' as='span'>
                {displayComponent}
              </Text>
            )
          }
        ]}
      />
      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
    );
  }


  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
    <CheckboxGroup
      label={label}
      labelHidden={hideLabel}
      data-testid={parentTestId}
      info={validatemessage || helperText}
      status={status}
    >
      {aCosmosCheckbox}
    </CheckboxGroup>
    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );


};


export default withConfiguration({{COMPONENT_CLASS_NAME}});