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

export const Filter = ({
  filterOn,
  setFilterOn
}: FilterProps) => {

  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 
                id="closeFullMenu"
                className="full-menu-close"
              >
                <img 
                  src={ IMAGE_ROOT + '/ico_close.svg' }
                  alt="닫기"
                  onClick={ () => onClickToClose() }
                />
              </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">
              <div className="opt-label">주문번호/ID</div>
              <div className="opt-controls">
                <select className="w-110">
                  <option>주문번호</option>
                  <option>ID</option>
                </select>
                <input
                  className="flex-1"
                  type="text"
                  placeholder=""
                />
              </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">1개월</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
                      type="button"
                      className="date-btn"
                    >
                      <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 
                      type="button" 
                      className="date-btn"
                    >
                      <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">요청취소</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" 
                    style={{ visibility: 'hidden' }}
                  ></span>
                </div>
              </div>
            </div>

            <div className="opt-field">
              <div className="opt-label">결제수단</div>
              <div className="opt-controls">
                <select className="flex-1">
                  <option>전체</option>
                </select>
              </div>
            </div>

            <div className="opt-field">
              <div className="opt-label">거래금액</div>
              <div className="opt-controls">
                <div className="input-wrapper ">
                  <input
                    type="text"
                    placeholder=""
                  />
                </div>
                <span> ~ </span>
                <div className="input-wrapper date">
                  <input
                    type="text"
                    placeholder=""
                    />
                </div>
              </div>
            </div>
          </div>
          <div className="apply-row">
            <button className="btn-50 btn-blue flex-1">적용</button>
          </div>
        </div>
      </motion.div>
    </>
  );
};