import { useState } from 'react';
import {
  Button,
  ButtonVariant,
  Content,
  DataList,
  DataListAction,
  DataListCell,
  DataListItem,
  DataListItemCells,
  DataListItemRow,
  Toolbar,
  ToolbarItem,
  ToolbarContent,
  ToolbarToggleGroup,
  ToolbarGroup,
  Divider,
  Drawer,
  DrawerActions,
  DrawerCloseButton,
  DrawerContent,
  DrawerContentBody,
  DrawerHead,
  DrawerPanelBody,
  DrawerPanelContent,
  DrawerSection,
  Flex,
  FlexItem,
  Icon,
  InputGroup,
  InputGroupItem,
  PageSection,
  Progress,
  Stack,
  StackItem,
  TextInput,
  Title,
  Select,
  SelectOption,
  SelectOptionProps,
  MenuToggle
} from '@patternfly/react-core';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';

interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
  label: string;
}

const statusOptions: SelectOptionType[] = [
  { value: 'New', label: 'New' },
  { value: 'Pending', label: 'Pending' },
  { value: 'Running', label: 'Running' },
  { value: 'Cancelled', label: 'Cancelled' }
];

const riskOptions: SelectOptionType[] = [
  { value: 'Low', label: 'Low' },
  { value: 'Medium', label: 'Medium' },
  { value: 'High', label: 'High' }
];

export const PrimaryDetailFullPage: React.FunctionComponent = () => {
  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
  const [inputValue, setInputValue] = useState('');
  const [statusIsOpen, setStatusIsOpen] = useState(false);
  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
  const [riskIsOpen, setRiskIsOpen] = useState(false);
  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');

  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
    setStatusSelected(value);
    setStatusIsOpen(false);
  };

  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
    setRiskSelected(value);
    setRiskIsOpen(false);
  };

  const onSelectDataListItem = (
    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
    id: string
  ) => {
    setSelectedDataListItemId(id);
    setIsDrawerExpanded(true);
    setDrawerPanelBodyContent(id.charAt(id.length - 1));
  };

  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {
    setIsDrawerExpanded(false);
    setSelectedDataListItemId('');
  };

  const ToolbarItems = (
    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" alignItems="center">
      <ToolbarItem>
        <InputGroup>
          <InputGroupItem isFill>
            <TextInput
              name="full-page-data-toolbar-input1"
              id="full-page-data-toolbar-input1"
              type="search"
              aria-label="search input example"
              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}
              value={inputValue}
            />
          </InputGroupItem>
          <InputGroupItem>
            <Button
              variant={ButtonVariant.control}
              aria-label="search button for search input"
              icon={<RhMicronsSearchIcon />}
            />
          </InputGroupItem>
        </InputGroup>
      </ToolbarItem>
      <ToolbarGroup variant="filter-group" alignItems="center">
        <ToolbarItem>
          <Select
            aria-label="Status select"
            selected={statusSelected}
            isOpen={statusIsOpen}
            toggle={(toggleRef) => (
              <MenuToggle
                ref={toggleRef}
                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}
                isExpanded={statusIsOpen}
              >
                {statusSelected}
              </MenuToggle>
            )}
            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}
            onSelect={onStatusSelect}
          >
            {statusOptions.map(({ label, value }) => (
              <SelectOption key={label} value={value}>
                {label}
              </SelectOption>
            ))}
          </Select>
        </ToolbarItem>
        <ToolbarItem>
          <Select
            aria-label="Risk select"
            selected={riskSelected}
            isOpen={riskIsOpen}
            toggle={(toggleRef) => (
              <MenuToggle
                ref={toggleRef}
                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}
                isExpanded={riskIsOpen}
              >
                {riskSelected}
              </MenuToggle>
            )}
            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}
            onSelect={onRiskSelect}
          >
            {riskOptions.map(({ label, value }) => (
              <SelectOption key={label} value={value}>
                {label}
              </SelectOption>
            ))}
          </Select>
        </ToolbarItem>
      </ToolbarGroup>
    </ToolbarToggleGroup>
  );

  const panelContent = (
    <DrawerPanelContent>
      <DrawerHead>
        <Title headingLevel="h2" size="xl">
          node-{drawerPanelBodyContent}
        </Title>
        <DrawerActions>
          <DrawerCloseButton onClick={onCloseDrawerClick} />
        </DrawerActions>
      </DrawerHead>
      <DrawerPanelBody>
        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
          <FlexItem>
            <p>
              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
              can also make the drawer scrollable.
            </p>
          </FlexItem>
          <FlexItem>
            <Progress value={parseInt(drawerPanelBodyContent) * 10} title="Title" />
          </FlexItem>
          <FlexItem>
            <Progress value={parseInt(drawerPanelBodyContent) * 5} title="Title" />
          </FlexItem>
        </Flex>
      </DrawerPanelBody>
    </DrawerPanelContent>
  );

  const drawerContent = (
    <DataList
      aria-label="data list"
      selectedDataListItemId={selectedDataListItemId}
      onSelectDataListItem={onSelectDataListItem}
    >
      <DataListItem id="full-page-item1">
        <DataListItemRow>
          <DataListItemCells
            dataListCells={[
              <DataListCell key="primary-content">
                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                  <FlexItem>
                    <p>patternfly</p>
                    <small>
                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
                    </small>
                  </FlexItem>
                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
                    <FlexItem>
                      <RhUiBranchFillIcon /> 10
                    </FlexItem>
                    <FlexItem>
                      <RhUiCodeIcon /> 4
                    </FlexItem>
                    <FlexItem>
                      <RhUiCubesIcon /> 5
                    </FlexItem>
                    <FlexItem>Updated 2 days ago</FlexItem>
                  </Flex>
                </Flex>
              </DataListCell>,
              <DataListAction
                key="actions"
                aria-labelledby="full-page-item1 full-page-action1"
                id="full-page-action1"
                aria-label="Actions"
              >
                <Stack>
                  <StackItem>
                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
                  </StackItem>
                  <StackItem>
                    <Button variant={ButtonVariant.link}>Link Button</Button>
                  </StackItem>
                </Stack>
              </DataListAction>
            ]}
          />
        </DataListItemRow>
      </DataListItem>
      <DataListItem id="full-page-item2">
        <DataListItemRow>
          <DataListItemCells
            dataListCells={[
              <DataListCell key="primary-content">
                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                  <FlexItem>
                    <p>patternfly-elements</p>
                    <small>PatternFly elements</small>
                  </FlexItem>
                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
                    <FlexItem>
                      <RhUiBranchFillIcon /> 10
                    </FlexItem>
                    <FlexItem>
                      <RhUiCodeIcon /> 4
                    </FlexItem>
                    <FlexItem>
                      <RhUiCubesIcon /> 5
                    </FlexItem>
                    <FlexItem>
                      <Icon status="success">
                        <RhUiCheckCircleFillIcon />
                      </Icon>
                      7
                    </FlexItem>
                    <FlexItem>
                      <Icon status="warning">
                        <RhUiWarningFillIcon />
                      </Icon>
                      5
                    </FlexItem>
                    <FlexItem>
                      <Icon status="danger">
                        <RhUiCloseCircleFillIcon />
                      </Icon>
                      5
                    </FlexItem>
                    <FlexItem>Updated 2 days ago</FlexItem>
                  </Flex>
                </Flex>
              </DataListCell>,
              <DataListAction
                key="actions"
                aria-labelledby="full-page-item2 full-page-action2"
                id="full-page-action2"
                aria-label="Actions"
              >
                <Stack>
                  <StackItem>
                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
                  </StackItem>
                  <StackItem>
                    <Button variant={ButtonVariant.link}>Link Button</Button>
                  </StackItem>
                </Stack>
              </DataListAction>
            ]}
          />
        </DataListItemRow>
      </DataListItem>
      <DataListItem id="full-page-item3">
        <DataListItemRow>
          <DataListItemCells
            dataListCells={[
              <DataListCell key="primary-content">
                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                  <FlexItem>
                    <p>patternfly</p>
                    <small>
                      Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
                    </small>
                  </FlexItem>
                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
                    <FlexItem>
                      <RhUiBranchFillIcon /> 10
                    </FlexItem>
                    <FlexItem>
                      <RhUiCodeIcon /> 4
                    </FlexItem>
                    <FlexItem>
                      <RhUiCubesIcon /> 5
                    </FlexItem>
                    <FlexItem>Updated 2 days ago</FlexItem>
                  </Flex>
                </Flex>
              </DataListCell>,
              <DataListAction
                key="actions"
                aria-labelledby="full-page-item3 full-page-action3"
                id="full-page-action3"
                aria-label="Actions"
              >
                <Stack>
                  <StackItem>
                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
                  </StackItem>
                  <StackItem>
                    <Button variant={ButtonVariant.link}>Link Button</Button>
                  </StackItem>
                </Stack>
              </DataListAction>
            ]}
          />
        </DataListItemRow>
      </DataListItem>
      <DataListItem id="full-page-item4">
        <DataListItemRow>
          <DataListItemCells
            dataListCells={[
              <DataListCell key="primary-content">
                <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
                  <FlexItem>
                    <p>patternfly-elements</p>
                    <small>PatternFly elements</small>
                  </FlexItem>
                  <Flex spaceItems={{ default: 'spaceItemsMd' }}>
                    <FlexItem>
                      <RhUiBranchFillIcon /> 10
                    </FlexItem>
                    <FlexItem>
                      <RhUiCodeIcon /> 4
                    </FlexItem>
                    <FlexItem>
                      <RhUiCubesIcon /> 5
                    </FlexItem>
                    <FlexItem>
                      <Icon status="success">
                        <RhUiCheckCircleFillIcon />
                      </Icon>
                      7
                    </FlexItem>
                    <FlexItem>
                      <Icon status="warning">
                        <RhUiWarningFillIcon />
                      </Icon>
                      5
                    </FlexItem>
                    <FlexItem>
                      <Icon status="danger">
                        <RhUiCloseCircleFillIcon />
                      </Icon>
                      5
                    </FlexItem>
                    <FlexItem>Updated 2 days ago</FlexItem>
                  </Flex>
                </Flex>
              </DataListCell>,
              <DataListAction
                key="actions"
                aria-labelledby="full-page-item4 full-page-action4"
                id="full-page-action4"
                aria-label="Actions"
              >
                <Stack>
                  <StackItem>
                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
                  </StackItem>
                  <StackItem>
                    <Button variant={ButtonVariant.link}>Link Button</Button>
                  </StackItem>
                </Stack>
              </DataListAction>
            ]}
          />
        </DataListItemRow>
      </DataListItem>
    </DataList>
  );

  return (
    <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
      <PageSection aria-labelledby="main-title">
        <Content>
          <h1 id="main-title">Main title</h1>
          <p>
            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
            of it's relative line height of 1.5.
          </p>
        </Content>
      </PageSection>
      <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
        <Drawer isExpanded={isDrawerExpanded}>
          <DrawerSection>
            <Toolbar
              id="full-page-data-toolbar"
              inset={{ default: 'insetLg' }}
              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
            >
              <ToolbarContent alignItems="center">{ToolbarItems}</ToolbarContent>
            </Toolbar>
            <Divider component="div" />
          </DrawerSection>
          <DrawerContent panelContent={panelContent}>
            <DrawerContentBody>{drawerContent}</DrawerContentBody>
          </DrawerContent>
        </Drawer>
      </PageSection>
    </DashboardWrapper>
  );
};