import { useState, useEffect } from 'react';
import './Form.css';

function App() {
  const [payerName, setPayerName] = useState('');
  const [payerINN, setPayerINN] = useState('');
  const [payerPhoneEmail, setPayerPhoneEmail] = useState('');
  const [payerAddress, setPayerAddress] = useState('');
  const [clientId, setClientId] = useState('');
  const [payerBankAccount, setPayerBankAccount] = useState('');
  const [amount, setAmount] = useState('0-00');
  const [payerAccounts, setPayerAccounts] = useState([]);

  const handleBlur = () => {
    console.log(amount);
    console.log(payerBankAccount);
    console.log(payerINN);
  };

  useEffect(() => {
    const URLParams = new URLSearchParams(window.location.search);
    const cnum = URLParams.get('cnum');
    const ftype = URLParams.get('type');

    const fetchUsingAsyncAwaitWithFetchApi = async () => {
      const response = await fetch('/pmtvalidation/validate/', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          fields: [
            { name: 'payer_account' },
            { name: 'client_id', value: cnum },
            { name: 'form_type', value: ftype },
          ],
          action: 'getClientInfo',
        }),
      });
      const data = await response.json();
      setPayerName(data.fields[3].value);
      setPayerINN(data.fields[4].value);
      setPayerPhoneEmail(data.fields[6].value);
      setPayerAddress(data.fields[7].value);
      setClientId(data.fields[1].value);
      setPayerBankAccount(data.fields[12].value);
      setPayerAccounts(data.accounts);
    };

    fetchUsingAsyncAwaitWithFetchApi();
  }, []);

  return (
    <>
      <div className="payment">
        <div className="title_wrapper">
          <div className="title">
            Рублевый перевод на счета других клиентов или в другие банки,
            включая налоговые платежи
          </div>
          <div className="title">№2 от 03.07.2024</div>
        </div>
        <div className="section_wrapper">
          <div className="section_header">Плательщик</div>
          <div className="section_line"></div>
        </div>
        <div className="payer">
          <div className="child">Плательщик:</div>
          <div className="child">{`${payerName} ${clientId}`}</div>
          <div className="child">Номер счета:</div>
          <div className="child">
            <select
              onChange={(e) => setPayerBankAccount(e.target.value)}
              onBlur={handleBlur}
            >
              {payerAccounts.map((item, ind) => (
                <option key={`cbAccountNumber_${ind}`}>
                  {item.description
                    ? `${item.cbAccountNumber}|${item.description}`
                    : item.cbAccountNumber}
                </option>
              ))}
            </select>
          </div>
          <div className="child">ИНН:</div>
          <div className="child">{payerINN}</div>
          <div className="child">Сумма:</div>
          <div className="child">
            <span>
              <input
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                onBlur={handleBlur}
              />
              RUB
            </span>
          </div>
          <div className="child">Телефон или электронный адрес:</div>
          <div className="child">{payerPhoneEmail}</div>
          <div className="child"></div>
          <div className="child"></div>
          <div className="child">Адрес места жительства:</div>
          <div className="child">{payerAddress}</div>
          <div className="child">Комиссии и расходы:</div>
          <div className="child">
            <select>
              <option>OUR</option>
            </select>
          </div>
        </div>
        <div className="section_wrapper_1">
          <div className="section_header">Получатель</div>
          <div className="section_line"></div>
        </div>
        <div className="receiver_1">
          <div className="child"></div>
          <div className="child"></div>
          <div className="child">БИК:</div>
          <div className="child">
            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
          </div>
          <div className="child">№ Корр. счета:</div>
          <div className="child">
            <select style={{ maxWidth: '34ch' }}>
              <option>Выберите значение...</option>
            </select>
          </div>
          <div className="child">Номер счета:</div>
          <div className="child">
            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
          </div>
          <div className="child">ИНН:</div>
          <div className="child">
            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
          </div>
          <div className="child">КПП (103):</div>
          <div className="child">
            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
          </div>
        </div>
        <div className="receiver_2">
          <div className="child">Наименование:</div>
          <div className="child">
            <input onBlur={handleBlur} style={{ width: '100ch' }} />
          </div>
          <div className="child">Банк получателя:</div>
          <div className="child"></div>
          <div className="child">Назначение платежа:</div>
          <div className="child">
            <textarea
              style={{
                height: '60px',
                width: '133ch',
              }}
            />
          </div>
          <div className="child">Код вида дохода:</div>
          <div className="child">
            <select style={{ width: '102ch' }}>
              <option></option>
            </select>
          </div>
          <div className="child">Код (УИП) (22):</div>
          <div className="child">
            <input onBlur={handleBlur} style={{ maxWidth: '32ch' }} />
          </div>
        </div>
      </div>
    </>
  );
}

export default App;