/** @format */

import React from 'react';

import { FooterWrapper } from './styled';
interface FooterProps {
  useStatus: string;
  setUseStatus: (type: string) => void;
  warning: boolean | string;
  setWarning: (type: number | string) => void;
  personType: string;
  setPersonType: (type: string) => void;
}

const Footer = (props: FooterProps) => {
  const {
    useStatus,
    setUseStatus,
    warning,
    setWarning,
    personType,
    setPersonType,
  } = props;
  function onChangeType(typeNow: string) {
    if (typeNow === useStatus) {
      setUseStatus('');
      return;
    }
    setUseStatus(typeNow);
  }
  function onChangeWarning() {
    if (warning) {
      setWarning('');
      return;
    }
    setWarning(1);
  }
  function onChangePersonType(data: string) {
    if (personType === data) {
      setPersonType('');
      return;
    }
    setPersonType(data);
  }
  return (
    <FooterWrapper>
      <div className="tag-list">
        <div
          className={
            useStatus === 'not_auth' ? 'tag-item tag-active' : 'tag-item'
          }
          onClick={() => onChangeType('not_auth')}
        >
          <div className="icon square unregister"></div>
          <span className="text">未认证</span>
        </div>
        <div
          className={
            useStatus === 'self_use' ? 'tag-item tag-active' : 'tag-item'
          }
          onClick={() => onChangeType('self_use')}
        >
          <div className="icon square oneself"></div>
          <span className="text">自用房</span>
        </div>
        <div
          className={
            useStatus === 'rent_out' ? 'tag-item tag-active' : 'tag-item'
          }
          onClick={() => onChangeType('rent_out')}
        >
          <div className="icon square rent"></div>
          <span className="text">出租房</span>
        </div>
        <div
          className={useStatus === 'idle' ? 'tag-item tag-active' : 'tag-item'}
          onClick={() => onChangeType('idle')}
        >
          <div className="icon square vacancy"></div>
          <span className="text">空置房</span>
        </div>

        <div className="split-line" />

        <div
          className={
            personType === 'Control' ? 'tag-item tag-active' : 'tag-item'
          }
          onClick={() => onChangePersonType('Control')}
        >
          <div className="icon circle control"></div>
          <span className="text">管控人员</span>
        </div>
        <div
          className={
            personType === 'HelpObject' ? 'tag-item tag-active' : 'tag-item'
          }
          onClick={() => onChangePersonType('HelpObject')}
        >
          <div className="icon circle assist"></div>
          <span className="text">帮扶人员</span>
        </div>

        <div className="split-line" />

        <div
          className={warning ? 'tag-item tag-active' : 'tag-item'}
          onClick={() => onChangeWarning()}
        >
          <div className="icon irregular warning"></div>
          <span className="text">房屋告警</span>
        </div>
      </div>
    </FooterWrapper>
  );
};

export default Footer;