import { useMemo, Children } from 'react';
import { OneColumnPage as OneColumn, withConfiguration } from '@pega/cosmos-react-core';
import { ConfigurableLayout } from '@pega/cosmos-react-work';
// import { registerIcon } from '@pega/cosmos-react-core';
import type { PConnFieldProps } from './PConnProps';
import './create-nonce';

// temp
// import * as headlineIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headline.icon';

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

import GetNextWork from './GetNextWork';
import { getLayoutDataFromRegion } from './utils';

// temp
// registerIcon(headlineIcon);

// currently getting 'icon' from props is not supported with iconRegistry
// have to manually get icon, so can't determine a runtime for now
// so "headline" icon is hardcoded.

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

// 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) {
  // add back in icon when working
  // const { children, title, icon, useConfigurableLayout = false, getPConnect, enableGetNextWork } = props;
  const { children = [], title, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
  const childArray = useMemo(() => {
    return Children.toArray(children);
  }, [children]);
  const child0: any = childArray[0];
  const layoutItemsA = useMemo(() => {
    return getLayoutDataFromRegion(child0);
  }, [child0]);

  // temp
  const tempIcon = 'pi pi-headline';

  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <OneColumn
        // @ts-ignore
        a={useConfigurableLayout ? <ConfigurableLayout items={layoutItemsA} /> : childArray[0]}
        title={title}
        icon={tempIcon?.replace('pi pi-', '')}
        // @ts-ignore
        actions={enableGetNextWork ? <GetNextWork getPConnect={getPConnect} /> : null}
      />
    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );
}

export default withConfiguration({{COMPONENT_CLASS_NAME}});