import { useState } from 'react';

import {
  Box,
  Button,
  Dialog,
  Select,
  Stack,
  Text,
  createListCollection,
  useDisclosure,
} from '@chakra-ui/react';

import { environment } from '@/environment';
import { USERS } from '@/service/session';
import { hashLocalData } from '@/utils/sso';

export const USERS_COLLECTION = createListCollection({
  items: [
    { label: 'karadmin', value: 'adminA@666' },
    { label: 'karuser', value: 'userA@666' },
    { label: 'NO_USER', value: '' },
  ],
});

export const EnvDevelopment = () => {
  const dialog = useDisclosure();
  const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
  //const setUser = useRightsStore((store) => store.setUser);
  const buildEnv =
    process.env.NODE_ENV === 'development'
      ? 'Development'
      : import.meta.env.VITE_DEV_ENV_NAME;
  const envName: Array<string> = [];
  !!buildEnv && envName.push(buildEnv);
  if (!envName.length) {
    return null;
  }
  const handleChange = (selectedOption) => {
    console.log(`SELECT: [${selectedOption.target.value}]`);
    setSelectUserTest(selectedOption.target.value);
  };
  const onClose = () => {
    dialog.onClose();
    if (selectUserTest == 'NO_USER') {
      window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
    } else {
      window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
    }
  };

  return (
    <>
      <Box
        as="button"
        zIndex="100000"
        position="fixed"
        top="0"
        insetStart="0"
        insetEnd="0"
        h="2px"
        bg="warning.400"
        cursor="pointer"
        data-test-id="devtools"
        onClick={dialog.onOpen}
      >
        <Text
          position="fixed"
          top="0"
          insetStart="4"
          bg="warning.400"
          color="warning.900"
          fontSize="0.6rem"
          fontWeight="bold"
          px="10px"
          marginLeft="25%"
          borderBottomStartRadius="sm"
          borderBottomEndRadius="sm"
          textTransform="uppercase"
        >
          {envName.join(' : ')}
        </Text>
      </Box>
      <Dialog.Root open={dialog.open} onOpenChange={dialog.onClose}>
        <Dialog.Positioner>
          <Dialog.Backdrop />
          <Dialog.Content>
            <Dialog.Header>Outils développeurs</Dialog.Header>
            <Dialog.Body>
              <Stack>
                <Text>User</Text>
                <Select.Root
                  onChange={handleChange}
                  collection={USERS_COLLECTION}
                >
                  <Select.Trigger>
                    <Select.ValueText placeholder="Select test user" />
                  </Select.Trigger>
                  <Select.Content>
                    {USERS_COLLECTION.items.map((value) => (
                      <Select.Item item={value} key={value.value}>
                        {value.label}
                      </Select.Item>
                    ))}
                  </Select.Content>
                </Select.Root>
              </Stack>
            </Dialog.Body>
            <Dialog.Footer>
              <Button onClick={onClose}>Close</Button>
            </Dialog.Footer>
          </Dialog.Content>
        </Dialog.Positioner>
      </Dialog.Root>
    </>
  );
};
