Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { EmojiActivity } from './emojis/EmojiActivity'
import { EmojiFlags } from './emojis/EmojiFlags'
import { EmojiFood } from './emojis/EmojiFood'
import { EmojiNature } from './emojis/EmojiNature'
import { EmojiObjects } from './emojis/EmojiObjects'
import { EmojiPeople } from './emojis/EmojiPeople'
import { EmojiSymbols } from './emojis/EmojiSymbols'
import { EmojiTravel } from './emojis/EmojiTravel'
import styled from 'styled-components'
import { Tab, Tabs } from '@mui/material'
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
import LandscapeIcon from '@mui/icons-material/Landscape'
import RestaurantIcon from '@mui/icons-material/Restaurant'

const StyledEmojiContainer = styled.div`
  background-color: var(--bg-color);
  bottom: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  height: 200px;
  transform: translateZ(0);
  transform-origin: bottom;
  overflow: hidden;

  .smiley-panel-body {
    background: #fff;
    border-top: 1px solid var(--border-primary);
    box-sizing: border-box;
    height: 160px;
    padding: 10px 0;
    overflow: auto;
    width: 100%;

    .e1 {
      cursor: pointer;
    }
  }
`

const StyledEmojiTabs = styled(Tabs)`
  min-height: auto !important;
  border-bottom: 1px solid #f7fafc;
  border-top: 1px solid #f7fafc;
  background: #f9f9f9;
  display: flex;
  align-items: center;

  .MuiTabs-indicator {
    background-color: var(--font-color);
  }
`

const StyledTab = styled(Tab)`
  flex-grow: 1;
  color: var(--subtitle-color) !important;
  font-weight: bold !important;
  padding: 0.5rem 1rem !important;
  min-height: auto !important;
  &.Mui-selected {
    color: var(--font-color) !important;
  }
`

const Emojione = ({ onClickEmoji }) => {
  const [currentTab, setCurrentTab] = useState('people')

  const emojiTabs = {
    activity: 'activity',
    flags: 'flags',
    food: 'food',
    nature: 'nature',
    objects: 'objects',
    people: 'people',
    symbols: 'symbols',
    travel: 'travel',
  }

  const handleChangeTab = (tabToChange) => {
    setCurrentTab(tabToChange)
  }

  return (
    <StyledEmojiContainer>
      <StyledEmojiTabs
        value={currentTab}
        onChange={(e, newValue) => handleChangeTab(newValue)}
      >
        <StyledTab
          value={emojiTabs.people}
          icon={<EmojiEmotionsIcon />}
          disableRipple
        />
        <StyledTab
          value={emojiTabs.nature}
          icon={<LandscapeIcon />}
          disableRipple
        />
        <StyledTab
          value={emojiTabs.food}
          icon={<RestaurantIcon />}
          disableRipple
        />

        {/*   <li
          className={`menu-item ${
            currentTab === emojiTabs.activity ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.activity)}>
            <i className="ti-basketball"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.travel ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.travel)}>
            <i className="fa fa-car"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.objects ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.objects)}>
            <i className="ti-light-bulb"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.symbols ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
            <i className="ti-heart"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.flags ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.flags)}>
            <i className="ti-flag-alt"></i>
          </a>
        </li> */}
      </StyledEmojiTabs>

      <EmojiPeople
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.people}
      />
      <EmojiNature
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.nature}
      />
      <EmojiFood
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.food}
      />
      <EmojiActivity
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.activity}
      />
      <EmojiTravel
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.travel}
      />
      <EmojiObjects
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.objects}
      />
      <EmojiSymbols
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.symbols}
      />
      <EmojiFlags
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.flags}
      />
    </StyledEmojiContainer>
  )
}

export default Emojione