import { NavigationContext } from '@/context/navigation';
import { useContext, useEffect } from 'react';
import styled from 'styled-components';
import { Flex } from 'ui/grid';

const Container = styled.div`
  background-color: white;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 46px;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  border-top: 1px solid rgba(5, 5, 5, 0.06);
  z-index: 999999;
`;

const TabButton = styled.button`
  background: ${({ active }) => (active ? 'var(--color-primary)' : 'white')};
  color: ${({ active }) => (active ? 'white' : 'black')};
  border-radius: 2px 2px 0 0;
  border: none;
  cursor: pointer;
  height: 100%;
  width: 100%;
  font-size: 0.75rem;
`;

export function NavigationBar() {
  const { currentTab, setCurrentTab, tabsList } = useContext(NavigationContext);

  return (
    <Container>
      {tabsList.map(({ icon, key, title }) => (
        <TabButton key={key} active={key === currentTab} onClick={() => setCurrentTab(key)}>
          <Flex flexDirection="column" alignItems="center">
            {icon}
            {title}
          </Flex>
        </TabButton>
      ))}
    </Container>
  );
}

const Display = styled.div`
  display: ${(props) => (props.visible ? 'block' : 'none')};
`;

export function Tabs({ tabs }) {
  const { currentTab, setTabsList } = useContext(NavigationContext);

  useEffect(() => {
    setTabsList(tabs);
  }, [setTabsList, tabs]);

  return tabs.map(({ Component, key }) => (
    <Display key={key} visible={key === currentTab}>
      <Component key={key} tabs />
    </Display>
  ));
}