import { Col, Row } from 'antd'
import classNames from 'classnames'
import ProfileSocialLinksModal from 'components/ProfileSocialLinksModal'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { SocialProfileLinkItem } from '../../redux/User/types'
import DragDropContext from '../DragDropContext'
import EditorSocialLinkModal from '../EditorSocialLinkModal'
import { Icon } from '../Icon'
import PortalComponent from '../PortalComponent/PortalComponent'
import ProfileSocialLinkItem from '../ProfileSocialLinkItem'
import { Paragraph } from '../Typography'
import './ProfileSocialLinkList.scss'
interface ProfileSocialLinkListProps {
  links: SocialProfileLinkItem[]
  onSetLinks?: (links: SocialProfileLinkItem[]) => void
  onChangeField?: (key: string) => (text: string) => void
  className?: string
}

const ProfileSocialLinkList = ({
  links,
  onSetLinks,
  className
}: ProfileSocialLinkListProps) => {
  const [visibleEdit, setVisibleEdit] = useState(false)
  const [visibleAdd, setVisibleAdd] = useState(false)
  const [selectedItem, setSelectedItem] = useState<SocialProfileLinkItem>()
  const onDropEndModules = (list: SocialProfileLinkItem[]) => {
    onSetLinks?.(list)
  }
  const onEditItem = useCallback(
    (item: SocialProfileLinkItem) => () => {
      setSelectedItem(item)
      setVisibleEdit(true)
    },
    [links]
  )
  const onRemoveLink = useCallback(
    (key: string) => () => {
      const newLinks = links.filter(item => item.key !== key)
      onSetLinks?.(newLinks)
    },
    [links, onSetLinks]
  )
  const onCloseEdit = useCallback(() => {
    setVisibleEdit(false)
    setTimeout(() => {
      setSelectedItem(undefined)
    }, 150)
  }, [])
  const onCloseAdd = useCallback(() => {
    setVisibleAdd(false)
  }, [])
  const onSubmit = useCallback(
    (item: SocialProfileLinkItem) => {
      const list = [...links]
      const index = list.findIndex(el => el.key === item.key)
      if (index !== -1) {
        list[index] = { ...list[index], ...item }
      } else {
        list.push(item)
      }
      onSetLinks?.(list)
      onCloseEdit()
    },
    [onCloseEdit, onSetLinks, links]
  )

  const onDone = useCallback(
    (items: SocialProfileLinkItem[]) => {
      onSetLinks?.(items)
    },
    [onSetLinks]
  )
  const handleClickAdd = useCallback(() => {
    setVisibleAdd(true)
  }, [])
  return (
    <div>
      <Row
        className="m__b--14 onboarding-social-links width--132"
        gutter={8}
        align="middle"
      >
        <Col className="height--32">
          <Icon name="add-blue" />
        </Col>
        <Col onClick={handleClickAdd}>
          <Paragraph className="text--blue cursor-pointer" preset="semibold18">
            Add Links
          </Paragraph>
        </Col>
      </Row>
      <React.Fragment>
        <DragDropContext
          droppableId="modules-drop"
          listClassName={classNames('modules-list', className)}
          itemIdPrefix="module"
          list={links}
          onDropEndCallback={onDropEndModules}
        >
          {(dragProvided, snapshot, item) => (
            <PortalComponent
              innerRef={dragProvided.innerRef}
              namespaceClass="module-list"
              provided={dragProvided}
              snapshot={snapshot}
            >
              <ProfileSocialLinkItem
                name={item.key}
                key={`item_${item.id}`}
                title={item.name}
                icon={item.icon as any}
                dragHandleProps={dragProvided.dragHandleProps}
                edit={item.edit}
                isDisableDragged={item.edit || links?.length === 1}
                onEditItem={onEditItem(item)}
                onRemoveItem={onRemoveLink(item.key)}
                defaultValue={item.value}
              />
            </PortalComponent>
          )}
        </DragDropContext>
      </React.Fragment>
      <EditorSocialLinkModal
        visible={visibleEdit}
        onClose={onCloseEdit}
        item={selectedItem}
        onSubmit={onSubmit}
      />
      <ProfileSocialLinksModal
        visible={visibleAdd}
        onClose={onCloseAdd}
        links={links}
        onDone={onDone}
      />
    </div>
  )
}

export default React.memo(ProfileSocialLinkList)
