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

import { useLogin } from '@/scene/connection/useLogin';
import { useSessionService } from '@/service/session';

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 { clearToken } = useSessionService();
  const { connect, lastError } = useLogin();

  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 = (key: string, value: string) => {
    console.log(`SELECT: [${key}:${value}]`);
    if (key === 'NO_USER') {
      clearToken();
    } else {
      connect(key, value);
    }
  };
  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>Development tools</Dialog.Header>
            <Dialog.Body>
              <Stack>
                <Text>
                  User{' '}
                  <Span color="red" fontWeight="bold">
                    {lastError}
                  </Span>
                </Text>
                <Select.Root 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}
                        onClick={() => handleChange(value.label, value.value)}
                      >
                        {value.label}
                      </Select.Item>
                    ))}
                  </Select.Content>
                </Select.Root>
              </Stack>
            </Dialog.Body>
            <Dialog.Footer>
              <Button onClick={dialog.onClose}>Close</Button>
            </Dialog.Footer>
          </Dialog.Content>
        </Dialog.Positioner>
      </Dialog.Root>
    </>
  );
};