import './PanelCollapse.scss'
import React, { useCallback } from 'react'
import Collapse from 'antd/lib/collapse'
import { Row, Col } from 'antd/lib/grid'
import classNames from 'classnames'
import { Button, Checkbox, Tooltip } from 'antd'
import { Icon } from 'components/Icon'
import { FLAGS, useFeatureIsOn } from '@komi-app/flags-sdk'
import { useWindowSize } from '../../hooks'
import When from '@komi-app/when'
import { ModuleType } from '@komi-app/shared-types'

const { Panel } = Collapse

interface PanelCollapseProps {
  title?: JSX.Element | string
  action?: JSX.Element
  expandDisable?: boolean
  expand?: boolean
  toggleExpand?: (value: boolean) => void
  className?: string
  children?: any
  style?: any
  selected?: boolean
  onChangeSelected?: (value: boolean) => void
  isEdit?: boolean
  showTitle?: boolean
  isUnCheckGroup?: boolean
  type?: string
}

const PanelCollapseHeader: React.FC<any> = ({
  title,
  expandDisable,
  expand,
  action,
  togglePanel,
  selected,
  onChangeSelected,
  isEdit,
  isUnCheckGroup
}) => {
  const handleSelect = useCallback(
    (event: any) => {
      const checked = event.target.checked
      onChangeSelected?.(checked)
      return
    },
    [onChangeSelected]
  )
  const { width } = useWindowSize()

  const isMobileStyleChangesEnabled = width && width <= 768
  return (
    <Row
      className={classNames(
        'pannel-collapse__header',
        'panel-header-fix-width',
        {
          'p--18': !isMobileStyleChangesEnabled
        }
      )}
      align="middle"
      justify="space-between"
      wrap={false}
    >
      <Col flex="1" className="d--flex align__items--center">
        <Row wrap={false} gutter={16} align="middle">
          <Col onClick={e => e.stopPropagation()}>
            <Tooltip
              style={{ zIndex: 9999999 }}
              overlayClassName="group-module-tooltip"
              placement="top"
              title={`Select`}
            >
              {isUnCheckGroup ? (
                <div
                  onClick={() => {
                    onChangeSelected?.(false)
                  }}
                  className="height--24 cursor-pointer"
                >
                  <Icon name="un-check-group" />
                </div>
              ) : (
                <When
                  value={!isMobileStyleChangesEnabled}
                  then={
                    <Checkbox
                      data-testid="panel-collapse--group-checkbox"
                      checked={selected}
                      onChange={handleSelect}
                    />
                  }
                />
              )}
            </Tooltip>
          </Col>
          <When
            value={!isMobileStyleChangesEnabled}
            then={
              <Col>
                {expand ? (
                  <Button
                    data-testid="panel-collapse--toggle"
                    disabled={expandDisable}
                    onClick={() => {
                      togglePanel(false)
                    }}
                    className="p--0 d--flex align__items--center"
                    type="link"
                  >
                    {expandDisable ? (
                      <Icon
                        name="arrow-up-inactive"
                        className="pannel-collapse__header--icon"
                      />
                    ) : (
                      <Icon
                        name="arrow-up"
                        className="pannel-collapse__header--icon"
                      />
                    )}
                  </Button>
                ) : (
                  <Button
                    data-testid="panel-collapse--toggle"
                    disabled={expandDisable}
                    onClick={() => togglePanel(true)}
                    className="p--0 d--flex align__items--center"
                    type="link"
                  >
                    <Icon
                      name="arrow-down"
                      className="pannel-collapse__header--icon"
                    />
                  </Button>
                )}
              </Col>
            }
          />
        </Row>
        {title}
      </Col>
      {!isEdit && <Col>{action}</Col>}
    </Row>
  )
}

const PanelCollapse: React.FC<PanelCollapseProps> = ({
  title,
  action,
  children,
  className,
  expand = true,
  toggleExpand,
  style,
  expandDisable,
  onChangeSelected,
  selected,
  isEdit,
  isUnCheckGroup,
  type
}) => {
  const collapseClassName = classNames({
    'pannel-collapse': true,
    'show-scroll-collapse': type === ModuleType.GROUP ? false : true,
    [className || '']: true,
    selected
  })
  const onChange = (key: string | string[]) => {
    if (key.includes('1')) {
      toggleExpand && toggleExpand(true)
    } else {
      toggleExpand && toggleExpand(false)
    }
  }

  return (
    <div data-testid="panel-collapse">
      <Collapse
        accordion={false}
        className={collapseClassName}
        activeKey={expand ? ['1'] : []}
        defaultActiveKey={expand ? ['1'] : []}
        onChange={onChange}
        style={style}
        collapsible="disabled"
      >
        <Panel
          key="1"
          showArrow={false}
          header={
            <PanelCollapseHeader
              title={title}
              action={action}
              expand={expand}
              expandDisable={expandDisable}
              togglePanel={toggleExpand}
              onChangeSelected={onChangeSelected}
              selected={selected}
              isEdit={isEdit}
              isUnCheckGroup={isUnCheckGroup}
            />
          }
        >
          {children}
        </Panel>
      </Collapse>
    </div>
  )
}

export default PanelCollapse
