import Button from "/view/cmp/button/Button.jsx";
import LabeledField from "../../cmp/field/LabeledField.jsx";
import PhoneInput from "../../cmp/field/PhoneInput.jsx";
import Input from "../../cmp/field/Input";

const Fields = D.declare('view.page.tmp.Fields', () => {
  var data = new Store({
    phone: '',
    phone3: '7',
    phone4: '8',
    phone5: '79132251365',
    phone2: '894',
  });
  return <div>
    <div>
      <h5>Labeled field</h5>
      <LabeledField label={'Label'}/>
    </div>

    <div>
        <h3>Phone input</h3>
      <div style={{display: 'flex', 'flex-wrap': 'wrap'}}>
        <div>
          <h5>Empty</h5>

          <PhoneInput label={'Label'} bind={data.bind('phone')}/>
          <Input bind={data.bind('phone')}/>
        </div>
        <div>
          <h5>Code +7</h5>
          <PhoneInput label={'Label'} bind={data.bind('phone3')}/>
          <Input bind={data.bind('phone3')}/>
        </div>
        <div>
          <h5>Code +8</h5>
          <PhoneInput label={'Label'} bind={data.bind('phone4')}/>
          <Input bind={data.bind('phone4')}/>
        </div>
        <div>
          <h5>Partial</h5>
          <PhoneInput label={'Label'} bind={data.bind('phone2')}/>
          <Input bind={data.bind('phone2')}/>
        </div>

        <div>
          <h5>Filled</h5>
          <PhoneInput label={'Label'} bind={data.bind('phone5')}/>
          <Input bind={data.bind('phone5')}/>
        </div>
      </div>
    </div>
  </div>
});

export default Fields;
export {Fields};