import { CodeEditorControl } from '@patternfly/react-code-editor';
import { Flex, FlexItem, Modal, ModalBody, ModalHeader, Split, SplitItem, Switch } from '@patternfly/react-core';
import { CogIcon, ListIcon, OptimizeIcon, TableIcon } from '@patternfly/react-icons';
import * as React from 'react';

const ConfigModalItem = ({ title, description, onClick, Icon = CogIcon }) => {
  const [checked, setChecked] = React.useState(false);

  return (
    <Split hasGutter>
      <SplitItem isFilled>
        <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsMd' }}>
          <FlexItem>
            <Icon />
          </FlexItem>
          <FlexItem>
            <span className="pf-v6-u-font-weight-bold">{title}</span>
            <p>{description}</p>
          </FlexItem>
        </Flex>
      </SplitItem>
      <SplitItem>
        <Switch
          id={title}
          isReversed
          label={checked ? 'On' : 'Off'}
          onChange={(_, c) => {
            setChecked(c);
            onClick(c);
          }}
          aria-label={title}
          className="pf-v6-u-mt-sm"
          isChecked={checked}
        />
      </SplitItem>
    </Split>
  );
}

const ConfigModalMockup = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <>
      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(!isModalOpen)}
        ouiaId="BasicModal"
        variant="small"
        aria-labelledby="basic-modal-title"
        aria-describedby="modal-box-body-basic"
      >
        <ModalHeader title="Editor settings" labelId="basic-modal-title" />
        <ModalBody id="modal-box-body-basic">
          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
            <ConfigModalItem
              title="Enable OpenShift Lightspeed"
              description="Enable or disable OpenShift Lightspeed for this editor."
              onClick={(checked) => console.log('OpenShift Lightspeed:', checked)}
              Icon={OptimizeIcon}
            />
            <ConfigModalItem
              title="Enable Tooltips"
              description="Enable or disable tooltips for code suggestions and actions."
              onClick={(checked) => console.log('Tooltips:', checked)}
              Icon={ListIcon}
            />
            <ConfigModalItem
              title="Enable Sticky Scroll"
              description="Enable or disable sticky scroll for code navigation."
              onClick={(checked) => console.log('Sticky Scroll:', checked)}
              Icon={TableIcon}
            />
          </Flex>
        </ModalBody>
      </Modal>
      <CodeEditorControl
        icon={<CogIcon />}
        aria-label="Editor settings"
        tooltipProps={{ content: 'Editor settings' }}
        onClick={() => setIsModalOpen(true)}
      />
    </>
  )
}