import { Button, Col, Row } from 'antd'

import { Icon } from 'components/Icon'
import { Text } from 'components/Typography'

import selfless from '@komi-app/selfless'
import { useWindowSize } from 'hooks'
import { AsqMeModuleType } from '@komi-app/meta-profiles'

export type ModuleAsqMeHeaderProps = {
  moduleType: AsqMeModuleType
  onClickNewItem?: () => void
  numberOfItems: number
}

function useModuleAsqMeHeader(
  props: ModuleAsqMeHeaderProps
): ModuleAsqMeHeaderViewProps {
  const { width } = useWindowSize()

  return {
    ...props,
    isMobileStyleChangesEnabled: width ? width <= 768 : false
  }
}

type ModuleAsqMeHeaderViewProps = ModuleAsqMeHeaderProps & {
  isMobileStyleChangesEnabled: boolean
}

function ModuleAsqMeHeaderView({
  onClickNewItem,
  numberOfItems,
  isMobileStyleChangesEnabled
}: ModuleAsqMeHeaderViewProps) {
  return (
    <Row
      align="middle"
      justify="space-between"
      className={isMobileStyleChangesEnabled ? 'm__b--8' : 'm__b--24'}
    >
      <Col className="height--32">
        {onClickNewItem && (
          <Button
            className="add-item-btn p--0"
            type="link"
            onClick={onClickNewItem}
          >
            <div className="d--flex justify__content--center align__items--center">
              <Icon name="add-blue" />
              <Text preset="semibold18" className="text--blue m__l--4">
                Add New Item
              </Text>
            </div>
          </Button>
        )}
      </Col>
      <Col>
        <Text preset="medium14" className="text--default opacity-6">
          {numberOfItems}&nbsp;
          {numberOfItems > 1 ? 'items added' : 'item added'}
        </Text>
      </Col>
    </Row>
  )
}

export const ModuleAsqMeHeader = selfless<
  ModuleAsqMeHeaderProps,
  ModuleAsqMeHeaderViewProps
>(ModuleAsqMeHeaderView, useModuleAsqMeHeader)
