import React, {useEffect, useRef, useState} from "react";

//strings

//components
import Gap from "../../../../Talk-ui-kit/src/gap";
import Divider from "../../../../Talk-ui-kit/src/divider";
import List, {ListItem} from "../../../../Talk-ui-kit/src/list";
import {Text} from "../../../../Talk-ui-kit/src/typography";
import Container from "../../../../Talk-ui-kit/src/container";
import {MdCheckCircle} from "react-icons/md";

//styling
import style from "../../../styles/app/AsideSearchFilder.scss";

export function buildMenuItem(type, name, value, Icon, CustomIcon, isCustomValue, params) {
  return {
    type,
    name,
    value,
    Icon: Icon ? () => <Icon size={style.iconSizeMd} color={value ? style.colorAccent : style.colorGrayDark}/> : Icon,
    CustomIcon: CustomIcon ? e => CustomIcon : null,
    isCustomValue,
    params
  }
}

export default function ({menuItems, setSettings}) {
  return <List>
    {menuItems.map((el, index) => (
      <ListItem key={el.type} onSelect={el.isCustomValue ? null : setSettings.bind(null, el.type, !el.value)} invert
                style={{cursor: "pointer"}} {...el?.params?.listItemProps}>
        <Container display="flex" alignItems="center">
          <Container flex="1 1 0" display="flex" alignItems="center">
            {el.Icon &&
            <Gap y={15} x={10} block style={{lineHeight: 0}}>
                <el.Icon/>
            </Gap>
            }

            <Gap y={15} x={10} block>
              <Text>{el.name}</Text>
            </Gap>
          </Container>
          <Container flex="none">

            {
              el.CustomIcon ?
                <el.CustomIcon/>
                :
                <MdCheckCircle size={style.iconSizeMd} color={el.value ? style.colorAccent : style.colorGrayDark}/>
            }  </Container>

        </Container>
        {(menuItems.length - 1) !== index && (
          <Gap x={10} block>
            <Divider color="gray" light {...el?.params?.dividerStyle ? el?.params?.dividerStyle : {}}/>
          </Gap>
        )}

      </ListItem>
    ))}
  </List>
}