import { SocialIcon, SocialLinkType } from '@komi-app/creator-ui'
import { FLAGS, IfFeatureDisabled, IfFeatureEnabled } from '@komi-app/flags-sdk'
import { Col, Dropdown, Menu, Row } from 'antd'
import classNames from 'classnames'
import LabelTooltip from 'components/LabelTooltip/LabelTooltip'
import * as React from 'react'
import { useEffect, useMemo, useState } from 'react'
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'
import DragDropButton from '../Button/DragDropButton'
import { Icon, IconName } from '../Icon'
import { Text } from '../Typography'
import './ProfileSocialLinkItem.scss'

interface ProfileSocialLinkItemProps {
  defaultValue?: string
  className?: string
  title?: string
  name?: string
  value?: string
  edit?: boolean
  isDisableDragged?: boolean
  icon?: IconName
  disableDrag?: boolean
  onEditItem?: () => void
  onRemoveItem?: () => void
  dragHandleProps?: DraggableProvidedDragHandleProps
}

const ProfileSocialLinkItem = ({
  className,
  title,
  icon,
  name,
  dragHandleProps,
  edit,
  onEditItem,
  defaultValue = '',
  isDisableDragged,
  onRemoveItem
}: ProfileSocialLinkItemProps) => {
  const [value, setValue] = useState(defaultValue)

  useEffect(() => {
    if (defaultValue?.length) {
      setValue(defaultValue)
    }
  }, [defaultValue])
  const menu = useMemo(() => {
    return (
      <Menu>
        <Menu.Item onClick={onEditItem}>
          <Text preset="semibold16">Edit Link</Text>
        </Menu.Item>
        <Menu.Item onClick={onRemoveItem}>
          <Text className="text--red" preset="semibold16">
            Delete
          </Text>
        </Menu.Item>
      </Menu>
    )
  }, [onEditItem, onRemoveItem])
  return (
    <div
      className={classNames(
        'profile-social-link-item',
        edit && 'p__b--0',
        className
      )}
    >
      <Row align="middle" wrap={false}>
        <Col className="profile-social-link-item--left" flex={1}>
          <Row>
            <IfFeatureEnabled
              feature={FLAGS.FEAT_SB_186_ADDITIONAL_SOCIAL_LINKS}
            >
              <SocialIcon
                social={(name as SocialLinkType) || SocialLinkType.WEBSITE}
                mode="color"
              />
            </IfFeatureEnabled>
            <IfFeatureDisabled
              feature={FLAGS.FEAT_SB_186_ADDITIONAL_SOCIAL_LINKS}
            >
              <Icon name={icon || 'apple-music'} />
            </IfFeatureDisabled>
            <Text className="m__l--8" ellipsis={true} preset="semibold16">
              {title}
            </Text>
          </Row>
          <div className={'m__t--4'}>
            <LabelTooltip
              label={value}
              maxLength={90}
              className="text--grey4 profile-social-link-item__title"
              preset="regular14"
            />
          </div>
        </Col>
        <Col className="height--24">
          <Row wrap={false} gutter={16} align="middle">
            <Col>
              <Dropdown
                overlayClassName="profile-social-link-item__dropdown"
                trigger={['click']}
                overlay={menu}
              >
                <div className="width--24 height--24 cursor-pointer">
                  <Icon name="more" />
                </div>
              </Dropdown>
            </Col>
            <Col>
              <DragDropButton
                className="p--0"
                dragType="vertical"
                dragHandleProps={dragHandleProps}
                disabled={isDisableDragged}
                onClick={event => event.stopPropagation()}
              />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  )
}

export default React.memo(ProfileSocialLinkItem)
