import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { Col, Form, Row } from 'antd'
import { useForm } from 'antd/lib/form/Form'
import Input from 'antd/lib/input'
import classNames from 'classnames'

import { TalentProfileDisplayNameTypes } from '../../../../redux/User/types'
import { useTypedSelector } from '../../../../redux/rootReducer'
import { selectUserData } from '../../../../redux/User/selector'
import { setTalentProfileAction } from '../../../../redux/User/actions'

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

import CustomImageUploader from './CustomImageUploader'
import ProfileCustomImage from './ProfileCustomImage'

import './ProfileDisplayName.scss'

const ProfileDisplayName: React.FC = () => {
  const {
    form,
    inputRef,
    isActive,
    statusActive,
    user,
    handleSubmit,
    handleChangeActive,
    handleClickInput,
    handleClickItem,
    onBlur
  } = useProfileDisplayName()

  return (
    <div
      id="profile-display-name"
      className="profile-display-name"
      data-testid="profile-display-name__wrapper"
    >
      <div className="onboarding-header-display-image">
        <div className="onboarding-header-display-name p--16">
          <Row className="m__b--5" align="middle" justify="space-between">
            <Col flex={'1'}>
              <Text preset="medium18" data-testid="profile-display-name__title">
                Display Name or Logo
              </Text>
            </Col>
            <Col>
              <div
                onClick={handleChangeActive}
                style={{ cursor: 'pointer' }}
                data-testid="profile-display-name__activation-toggle"
              >
                <Icon name={isActive ? 'switch-on' : 'switch-off'} />
              </div>
            </Col>
          </Row>

          <Text
            className="text--grey4"
            data-testid="profile-display-name__subtitle"
          >
            You can add a display name manually or update a custom logo to suit
            your branding
          </Text>

          <div className="profile-display-name__content-wrapper">
            {!isActive && (
              <div
                className="overlay"
                data-testid="profile-display-name__overlay"
              ></div>
            )}

            <Row className="m__t--8" gutter={16}>
              <Col
                onClick={handleClickItem(TalentProfileDisplayNameTypes.TEXT)}
              >
                <Text preset="semibold14" className="text--grey4">
                  Text
                </Text>

                <Col
                  className={classNames(
                    'wrap-img',
                    statusActive === TalentProfileDisplayNameTypes.TEXT &&
                      'active'
                  )}
                  data-testid="profile-display-name__text-icon-wrapper"
                >
                  <div className="wrap-img_item">
                    <Icon
                      name="text-img"
                      data-testid="profile-display-name__text-icon"
                    />
                  </div>
                </Col>
              </Col>
              <Col
                onClick={handleClickItem(TalentProfileDisplayNameTypes.IMAGE)}
              >
                <Text preset="semibold14" className="text--grey4">
                  Logo
                </Text>

                <Col
                  className={classNames(
                    'wrap-img',
                    statusActive === TalentProfileDisplayNameTypes.IMAGE &&
                      'active'
                  )}
                  data-testid="profile-display-name__image-icon-wrapper"
                >
                  <div className="wrap-img_item">
                    <Icon
                      name="image"
                      data-testid="profile-display-name__image-icon"
                    />
                  </div>
                </Col>
              </Col>
            </Row>

            <Row
              className={classNames(
                'profile-display-name__content m__t--16',
                statusActive == TalentProfileDisplayNameTypes.TEXT
                  ? 'd--flex'
                  : 'd--none'
              )}
              data-testid="profile-display-name__text-content"
            >
              <Col span={'24'} data-testid="profile-display-name__text-title">
                <Text preset="medium18">Text</Text>
              </Col>

              <Text className="text--grey4 m__t--8">
                Type your display name into the field below
              </Text>
              <Col span={24} className="m__t--16">
                <Form
                  labelCol={{
                    span: 24
                  }}
                  wrapperCol={{
                    span: 24
                  }}
                  form={form}
                  hideRequiredMark
                  onFinish={handleSubmit}
                >
                  <Form.Item name="displayName">
                    <Input
                      ref={inputRef}
                      onClick={handleClickInput}
                      onBlur={onBlur}
                      className={
                        isActive && !user?.talentProfile?.displayName
                          ? 'invalid'
                          : ''
                      }
                      data-testid="profile-display-name__text-input"
                    />
                  </Form.Item>
                  {isActive && !user?.talentProfile?.displayName && (
                    <div className="error-message" role="alert">
                      Please enter a display name{' '}
                    </div>
                  )}
                </Form>
              </Col>
            </Row>

            <Row
              className={classNames(
                'profile-display-name__content m__x--0 m__t--16',
                statusActive == TalentProfileDisplayNameTypes.IMAGE
                  ? 'd--flex'
                  : 'd--none'
              )}
              gutter={20}
              data-testid="profile-display-name__image-content"
            >
              <Col span={24} className="p__x--0">
                <Paragraph
                  className="leading-28"
                  preset="medium18"
                  data-testid="profile-display-name__image-title"
                >
                  Logo
                </Paragraph>
                <Paragraph
                  className="m__t--8 m__b--16 text--grey4"
                  preset="regular14"
                  data-testid="profile-display-name__image-subtitle"
                >
                  Replace your display name with a custom logo.
                </Paragraph>
              </Col>

              <Row gutter={[20, 20]} style={{ minWidth: '90%' }}>
                {user?.talentProfile?.displayNameImage && (
                  <Col xs={{ span: 24 }} sm={{ span: 12 }}>
                    <Col
                      span={24}
                      className="border-box p__x--0"
                      style={{ height: '100%' }}
                    >
                      <ProfileCustomImage />
                    </Col>
                  </Col>
                )}

                <Col xs={{ span: 24 }} sm={{ span: 12 }}>
                  <Col
                    span={24}
                    className="p__x--0 sb-217-fix-custom-image-uploader"
                  >
                    <CustomImageUploader
                      title={
                        user?.talentProfile?.displayNameImage
                          ? 'Replace Logo'
                          : 'Add your Logo'
                      }
                      data-testid="profile-display-name__image-upload"
                    />
                    {isActive && !user?.talentProfile?.displayNameImage && (
                      <div className="error-message m__t--0">
                        Please upload a logo{' '}
                      </div>
                    )}
                  </Col>
                </Col>
              </Row>
            </Row>
          </div>
        </div>
      </div>
    </div>
  )
}

export const useProfileDisplayName = () => {
  const [form] = useForm()
  const inputRef = useRef<Input>(null)
  const dispatch = useDispatch()
  const user = useTypedSelector(selectUserData)
  const [isActive, setIsActive] = useState(false)
  const [statusActive, setStatusActive] = useState(
    TalentProfileDisplayNameTypes.TEXT
  )

  useEffect(() => {
    if (!user?.talentProfile || !form) return
    const name = user?.talentProfile?.displayName || ''
    form.setFieldsValue({ displayName: name || '' })
    setIsActive(!!user.talentProfile?.showDisplayName)
    setStatusActive(
      user.talentProfile?.displayNameType || TalentProfileDisplayNameTypes.TEXT
    )
  }, [user?.talentProfile, form])

  const handleSubmit = useCallback(
    values => {
      dispatch(setTalentProfileAction(values))
    },
    [dispatch]
  )
  const onBlur = () => {
    form?.submit()
  }
  const handleChangeActive = useCallback(() => {
    if (!user) {
      return
    }
    setIsActive(!isActive)
    console.log('dispatch')
    dispatch(setTalentProfileAction({ showDisplayName: !isActive }))
  }, [user])

  const handleClickItem = (status: TalentProfileDisplayNameTypes) => () => {
    if (!user) {
      return
    }
    if (!isActive) {
      setIsActive(true)
      setStatusActive(status)
      dispatch(
        setTalentProfileAction({
          showDisplayName: true,
          displayNameType: status
        })
      )
      return
    }
    setStatusActive(status)
    dispatch(setTalentProfileAction({ displayNameType: status }))
  }
  const handleClickInput = useCallback(() => {
    // if (isVisibleTour) {
    //   setIsVisibleTour(false);
    //   setTimeout(() => {
    //     inputRef?.current?.focus();
    //   }, 100);
    // }
  }, [inputRef])

  return {
    form,
    inputRef,
    isActive,
    statusActive,
    user,
    handleSubmit,
    handleChangeActive,
    handleClickInput,
    handleClickItem,
    onBlur
  }
}

export default ProfileDisplayName
