import React from 'react';
import classNames from '@pansy/classnames';
import { APP_TYPE } from '../../types';
import { Button, Affix } from 'antd';
import NoticeRulesList from '../notice-rules-list';
import IconFont from '@sensoro/library/lib/components/icon-font';
import { useNoticeContext } from '../notice-context';
import styles from './index.less';

export interface NoticeFormProps {
  className?: string;
  editable?: boolean;
  onChange?: (value: boolean) => void;
}

const NoticeForm: React.FC<NoticeFormProps> = props => {
  const { className } = props;
  const {
    category,
    eventData,
    noticeData,
    onEventRule,
    onNoticeRule,
    onUnavailable,
    loading,
    change,
    onSubmit,
    disabled,
    editable,
  } = useNoticeContext();

  return (
    <div className={classNames(styles.wrapper, className)}>
      <NoticeRulesList
        className={styles.paddingWrapper}
        category={category}
        eventData={eventData}
        noticeData={noticeData}
        editable={editable}
        onEventRule={onEventRule}
        onNoticeRule={onNoticeRule}
        onUnavailable={onUnavailable}
        loading={loading}
      />
      <Affix offsetBottom={0}>
        <div className={styles.footerWrapper}>
          <div className={styles.footerTitle}></div>
          <div className={styles.footerExtra}>
            {change && (
              <span className={styles.tips}>
                <IconFont
                  type="icon-attention"
                  style={{ color: '#E57022', marginRight: 8 }}
                />
                预警通知规则已经修改，请注意提交
              </span>
            )}
            <Button disabled={disabled} type="primary" onClick={onSubmit}>
              提交
            </Button>
          </div>
        </div>
      </Affix>
    </div>
  );
};

export default NoticeForm;