import React, { useCallback, useMemo, useState } from 'react'
import { Col, Dropdown, Menu, Row } from 'antd'

import { Icon, IconName } from 'components/Icon'
import { Paragraph } from 'components/Typography'

import classNames from 'classnames'
import { DspLink } from 'types/dsp'

import 'components/SocialLinkList/SocialLinkList.scss'

interface SmartLinkDropdownProps {
  inModal?: boolean
  links: DspLink[]
  menuItems?: any[]
  onClickMenu?: (key: string) => void
}

// TODO: Copied from `SocialLinkList` - let's make a generic component when we have time
const SmartLinkDropdownComponent = ({
  inModal,
  links,
  menuItems,
  onClickMenu
}: SmartLinkDropdownProps) => {
  const [visibleDropdown, setVisibleDropdown] = useState(false)

  const onClickItem = useCallback(
    (key: string) => () => {
      setVisibleDropdown(false)
      setTimeout(() => {
        onClickMenu?.(key)
      }, 200)
    },
    [onClickMenu]
  )

  const menu = useMemo(() => {
    return (
      <Menu
        className={classNames('smart-link-list__menu', inModal && 'modal-list')}
        style={{ width: 270 }}
      >
        {menuItems?.map(item => {
          const isSingle = item.items.length === 1
          if (isSingle) {
            const isActive = links.some(
              element => element.type === item.items[0].key
            )

            return (
              <Menu.Item
                key={item.key}
                disabled={isActive}
                className={isActive ? 'active' : ''}
                onClick={onClickItem(item.items[0].key)}
              >
                <Row gutter={16} align="middle">
                  <Col>
                    <Paragraph preset="semibold16">{item.label}</Paragraph>
                  </Col>
                </Row>
              </Menu.Item>
            )
          }
          return (
            <Menu.SubMenu
              popupClassName={classNames(
                'smart-link-list__sub-menu',
                inModal && 'modal-list'
              )}
              key={item.key}
              title={item.label}
            >
              {item.items
                .sort((a: any, b: any) => (a.key > b.key ? 1 : -1))
                .map((el: any) => (
                  <Menu.Item
                    disabled={links.some(element => element.type === el.key)}
                    className={
                      links.some(element => element.type === el.key)
                        ? 'active'
                        : ''
                    }
                    onClick={onClickItem(el.key)}
                    key={el.key}
                  >
                    <Row gutter={16} align="middle">
                      <Col className="height--24">
                        <Icon name={el.icon as IconName} />
                      </Col>
                      <Col>
                        <Paragraph preset="semibold16">{el.name}</Paragraph>
                      </Col>
                    </Row>
                  </Menu.Item>
                ))}
            </Menu.SubMenu>
          )
        })}
      </Menu>
    )
  }, [links])

  return (
    <Dropdown
      trigger={['click']}
      visible={visibleDropdown}
      onVisibleChange={setVisibleDropdown}
      overlay={menu}
      overlayClassName="smart-link-list__dropdown"
      placement="topCenter"
      className={classNames(
        'smart-link-select--link-dd smart-link-list__add-btn cursor',
        inModal && 'modal-list'
      )}
      getPopupContainer={() =>
        document.querySelector<HTMLElement>('.smart-link-select--link-menu') ||
        document.body
      }
    >
      <Row gutter={8} align="middle">
        <Col className="height--32">
          <Icon name="add-blue" />
        </Col>
        <Col flex={'1'}>
          <Paragraph className="text--blue" preset="semibold18">
            Add Service
          </Paragraph>
        </Col>
      </Row>
    </Dropdown>
  )
}

export const SmartLinkDropdown = React.memo(SmartLinkDropdownComponent)
