import { Icons } from './icons';

export function WriteModal() {
  return (
    <div class="wm-modal" x-show="modals.write" x-cloak {...{ 'x-transition.opacity.duration.300ms': '' }}>
      <div class="wm-modal-mask" data-close-modal="write"></div>
      <section class="wm-modal-card write-card" role="dialog" aria-modal="true" aria-labelledby="write-title">
        <button class="modal-close" type="button" data-close-modal="write" aria-label="关闭">{Icons.close()}</button>
        <h2 id="write-title">写说说</h2>
        <form data-write-form>
          <textarea name="content" maxlength={5000} rows={6} placeholder="这一刻的想法..." required></textarea>
          <div class="write-count"><span data-write-count>0</span>/5000</div>
          <div class="media-picker" data-media-picker>
            <button class="media-add" type="button" data-action="pick-image">
              {Icons.plus({ class: 'wm-icon' })}
              <span>图片</span>
            </button>
            <button class="media-add" type="button" data-action="pick-video">
              {Icons.camera({ class: 'wm-icon' })}
              <span>视频</span>
            </button>
          </div>
          <input type="file" accept="image/jpeg,image/png,image/webp,image/gif" multiple hidden data-image-input />
          <input type="file" accept="video/mp4,video/webm,video/quicktime" hidden data-video-input />
          <div class="write-options">
            <label><input type="radio" name="visibility" value="public" checked />公开</label>
            <label><input type="radio" name="visibility" value="private" />私密</label>
            <label><input type="checkbox" name="isTop" />置顶</label>
            <label><input type="checkbox" name="isAd" />广告</label>
            <button type="button" data-action="use-location">{Icons.location({ class: 'wm-icon tiny' })}<span data-location-label>定位</span></button>
            <input type="hidden" name="position" />
            <input type="hidden" name="positionLat" />
            <input type="hidden" name="positionLng" />
          </div>
          <button class="primary-button" type="submit">发布</button>
        </form>
      </section>
    </div>
  );
}
