import { BaseEventOrig, Image, Input, InputProps, Text } from '@tarojs/components';
import { navigateTo } from '@/utils/route';
import Taro from '@tarojs/taro';

import { Checkbox } from '@taroify/core';
import { useCallback } from 'react';

import { MaterialVideoInfo } from '@/types/material';
import { logWithPrefix, isDesktop } from '@/utils/common';
import { PageUrl } from '@/constants/app';

import './index.less';

interface IProps {
  isTemp?: boolean;
  videoInfo: MaterialVideoInfo;
  onClickUpload?: () => void;
  onClickDelete?: () => void;
  onClickSetDefault?: () => void;
  onTitleChange?: (newTitle: string) => void;
}

const PREFIX = 'material-video-card';
const log = logWithPrefix(PREFIX);

function MaterialVideoCard(props: IProps) {
  const { videoInfo, isTemp = false, onClickUpload, onClickDelete, onClickSetDefault, onTitleChange } = props;
  const isVideo = videoInfo.type === 'video';

  const handleInput = useCallback(
    (e: BaseEventOrig<InputProps.inputValueEventDetail>) => {
      const value = e.detail?.value || '';
      log('handleInput value', value);
      onTitleChange?.(value);
    },
    [onTitleChange]
  );

  // const handleInputBlurOrConfirm = useCallback(() => {
  //   log('newVideoTitle', title);
  //   if (!title) {
  //     return;
  //   }
  //   onTitleChange?.(videoInfo);
  //   // ...
  // }, [title, videoInfo, onTitleChange]);

  const handleCheckboxChange = useCallback(
    (checked: boolean) => {
      log('handleCheckboxChange', checked);
      if (videoInfo.isDefault) {
        return;
      }
      // ...
      onClickSetDefault?.();
    },
    [videoInfo, onClickSetDefault]
  );

  const handleClickVideo = useCallback(() => {
    log('handleClickVideo', videoInfo);
    if (!videoInfo.url) {
      return;
    }
    if (isDesktop) {
      navigateTo(PageUrl.MaterialWebview, {
        source: encodeURIComponent(videoInfo.url)
      })
    } else {
      Taro.previewMedia({
        sources: [{ url: videoInfo.url, type: videoInfo.type }],
      });
    }

  }, [videoInfo]);

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__cover`}>
        {!isTemp && (
          <>
            <Image
              className={`${PREFIX}__cover__image`}
              mode="aspectFit"
              src={videoInfo.coverUrl}
              onClick={handleClickVideo}
            />
            {isVideo && (
              <Image
                className={`${PREFIX}__cover__preview-video`}
                mode="aspectFit"
                src={require('@/statics/svg/preview_video.svg')}
                onClick={handleClickVideo}
              />
            )}
          </>
        )}
        {isTemp && (
          <div className={`${PREFIX}__cover__placeholder`} onClick={onClickUpload}>
            <Image
              className={`${PREFIX}__cover__placeholder__image`}
              mode="aspectFit"
              src={require('@/statics/svg/add.svg')}
            />
          </div>
        )}
      </div>
      <div className={`${PREFIX}__info`}>
        {!isTemp && (
          <>
            <div className={`${PREFIX}__info__title`}>
              <Input
                value={videoInfo.title}
                maxlength={20}
                confirmType="done"
                placeholder="请填写直播产品名称"
                onInput={handleInput}
                // onBlur={handleInputBlurOrConfirm}
                // onConfirm={handleInputBlurOrConfirm}
                className={`${PREFIX}__info__title__input`}
                placeholderClass={`${PREFIX}__info__title__placeholder`}
              />
            </div>
            <div className={`${PREFIX}__info__operate`}>
              <Checkbox
                checked={videoInfo.isDefault}
                onChange={handleCheckboxChange}
                className={`${PREFIX}__info__operate__checkbox`}
              >
                选为封面
              </Checkbox>
              <div className={`${PREFIX}__info__operate__delete`} onClick={onClickDelete}>
                删除
              </div>
            </div>
          </>
        )}
        {isTemp && (
          <Text className={`${PREFIX}__info__temp-tips`}>
            {`视频不能超过1000M
            视频若太大加载较慢，请耐心等待`}
          </Text>
        )}
      </div>
    </div>
  );
}

export default MaterialVideoCard;