import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { InvoiceFilterProps } from '../model/types';

export const InvoiceFilter = ({
  filterOn,
  setFilterOn
}: InvoiceFilterProps) => {
  const variants = {
    hidden: { x: '100%' },
    visible: { x: '0%' },
  };

  const onClickToClose = () => {
    setFilterOn(false);
  };
  return (
    <>
      <motion.div 
        id="fullMenuModal" 
        className="full-menu-modal" 
        initial="hidden"
        animate={ (filterOn)? 'visible': 'hidden' }
        variants={ variants }
        transition={{ duration: 0.3 }}
        style={{
          width: '100%',
          height: '100%',
        }}
      >
        <div className="full-menu-container">
          <div className="full-menu-header">
            <div className="full-menu-title center">필터</div>
            <div className="full-menu-actions">
              <button 
                className="full-menu-close"
                onClick={ () => onClickToClose() }
              >
                <img 
                  src={ IMAGE_ROOT + '/ico_close.svg' }
                  alt="닫기"
                />
              </button>
            </div>
          </div>
    
          <div className="option-list pb-120">
            <div className="opt-field">
              <div className="opt-label">가맹점</div>
              <div className="opt-controls">
                <select className="flex-1">
                  <option>nictest001m</option>
                </select>
              </div>
            </div>

            <div className="opt-field mt_top">
              <div className="opt-label">발행월</div>
              <div className="opt-controls col below h36">
                <div className="chip-row">
                  <span className="keyword-tag active">당월</span>
                  <span className="keyword-tag">2개월</span>
                  <span className="keyword-tag">3개월</span>
                  <span className="keyword-tag">직접입력</span>
                </div>
                <div className="range-row">
                  <div className="input-wrapper date">
                    <input 
                      className="date-input"
                      type="text" 
                      placeholder="날짜 선택" 
                      value="2025.06.08" 
                      readOnly={ true }
                    />
                    <button 
                      className="date-btn"
                      type="button" 
                    >
                      <img 
                        src={ IMAGE_ROOT + '/ico_date.svg' }
                        alt="날짜 선택"
                      />
                    </button>
                  </div>
                  <span className="beetween">~</span>
                  <div className="input-wrapper date">
                      <input 
                        className="date-input"
                        type="text"
                        placeholder="날짜 선택"
                        value="2025.06.08"
                        readOnly={ true }
                      />
                      <button 
                        className="date-btn"
                        type="button"
                      >
                        <img 
                          src={ IMAGE_ROOT + '/ico_date.svg' }
                          alt="날짜 선택"
                        />
                      </button>
                  </div>
                </div>
              </div>
            </div>

            <div className="opt-field">
              <div className="opt-label">영수 구분</div>
              <div className="opt-controls col below h36">
                <div className="chip-row">
                  <span className="keyword-tag active">전체</span>
                  <span className="keyword-tag">영수</span>
                  <span className="keyword-tag">청구</span>
                  <span 
                    className="keyword-tag" 
                    style={{ visibility: 'hidden' }}
                  ></span>
                </div>
              </div>
            </div>

            <div className="opt-field">
              <div className="opt-label">발행 대상</div>
              <div className="opt-controls col below h36">
                <div className="chip-row">
                  <span className="keyword-tag active">전체</span>
                  <span className="keyword-tag">일반</span>
                  <span className="keyword-tag">차액정산</span>
                  <span className="keyword-tag">환급정산</span>
                </div>
              </div>
            </div>

          </div>
          <div className="apply-row">
            <button className="btn-50 btn-blue flex-1">적용</button>
          </div>
        </div>
      </motion.div>
    </>
  );
};