import { Button } from '@tarojs/components';

import { Popup } from '@taroify/core';
import { useCallback, useEffect, useState } from 'react';

import SafeBottomPadding from '@/components/safe-bottom-padding';
import Select from '@/components/select';
import { MaterialStatus } from '@/constants/material';
import { MaterialProfile } from '@/types/material';

import './index.less';

interface IProps {
  open: boolean;
  value: MaterialStatus;
  onSave: (newValue: MaterialProfile['isOpen']) => void;
  onClose: () => void;
}

const PREFIX = 'material-manage-popup';
const OPTIONS = [
  { label: '开放', value: MaterialStatus.Open },
  { label: '关闭', value: MaterialStatus.Close },
];

function MaterialManagePopup(props: IProps) {
  const { open, value = MaterialStatus.Open, onSave, onClose } = props;
  const [currentValue, setCurrentValue] = useState<MaterialStatus>(value);

  const handleSelect = useCallback((v: MaterialStatus) => setCurrentValue(v), []);

  const handleSave = useCallback(() => {
    onSave(currentValue === MaterialStatus.Open);
    onClose();
  }, [currentValue, onSave, onClose]);

  useEffect(() => {
    setCurrentValue(value);
  }, [value]);

  return (
    <Popup className={`${PREFIX}__popup`} placement="bottom" open={open} onClose={onClose}>
      <div className={PREFIX}>
        <div className={`${PREFIX}__header`}>
          <div className={`${PREFIX}__title`}>模卡开放状态</div>
          <div className={`${PREFIX}__tips`}>开放模卡给企业查看后，可以获得更多求职机会</div>
        </div>
        <Select className={`${PREFIX}__select`} options={OPTIONS} value={currentValue} onSelect={handleSelect} />
        <Button className={`${PREFIX}__btn`} onClick={handleSave}>
          保存
        </Button>
      </div>
      <SafeBottomPadding />
    </Popup>
  );
}

export default MaterialManagePopup;